FELIX-252394-CSS

/*Custom Box by HokZ #41458 / #170947, commissioned by and written for felix#252394 and permitted to use by them ONLY.
Do not copy, edit, upload, redistrubute or use any bit of the code provided. It does not belong to you.*/

.MainContainer {
    background-color: #00000063;
    color: white !important;
    border: 2px solid #999 !important;
    max-width: 640px;
    border-radius: 25px;
    border-collapse: separate;
    padding: 5px !important;
    height: auto !important;
    margin: 5px;
    margin-bottom: 20px;
    transition: box-shadow 1s ease-in-out;
}

.MainContainer .Header {
    background-color: #151515;
    font-size: 20px !important;
    color: #505050 !important;
}

.MainContainer:hover {
    box-shadow: 0px 0px 30px #333;
}

.ContentCover {
    width: 100%;
    display: flex;
    overflow: hidden;}

.LeftContent {
    height: 290px;
    width: 50%;
    overflow: auto;
    margin: 5px 2.5px 5px 5px !important;
    padding: 10px;
    font-size: 13px;
    text-align: left;
    }

.ExpandCover {
    width: 100%;
    overflow: hidden;
}

.Expand {
    background: #171717;
    height: 50px;
    width: 100%;
    overflow: hidden;
    margin-top: -10px;
    border: 1px solid #ffffff29;
    padding: 5px 5px 5px 10px;
    transition: 1s;
}

.Expand:hover {
    height: 150px;
    transition: 1s;
}

.Expand h4 {
    font-size: 18px !important;
    margin-bottom: -7px;
    color: #505050 !important;
}

.RightContent {
    height: 290px;
    width: 50%;
    margin: 5px 5px 5px 2.5px !important;
    padding: 10px;
    font-size: 13px;
    text-align: left;}


.TopLinks a {
    letter-spacing: 0.5px;
    transition: 1s !important;
    margin-left: 50px;
    margin-right: 50px;
}

.TopLinks a:hover,
.TopLinks a:active {
    letter-spacing: 2px;
    transition: 1s !important;
}

.TopLinks {
    font-size: 15px;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-bottom: 2px;}


/*CodeSnippet for animated underline yoink'd from 30secondsofcode.org*/
.TopLinks a {
    display: inline-block;
    position: relative;}

.TopLinks a::before {
    color: #999;
    content: "▼";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    top: -10px;
    left: 0;
}

.TopLinks a:hover::before {
    content: "▼";
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 1px;
    top: -11px;
    left: 0;
    transition:  transform 0.25s ease-out;
}

.TopLinks a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #999;
    transition: transform 0.25s ease-out;
}

.TopLinks a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;}

.credit {
    text-align: right;
    margin-right: 15px;
    font-size:5px;
    transition: 1s;}

.credit:hover {
    font-size: 12px;
    transition: 1s;
    text-decoration: unerline;
    letter-spacing: 2px;}

.credit a {
    color: #515151 !important;}
.credit a:hover {
    color: #ffffff !important}

.LeftContent::-webkit-scrollbar,
.RightContent::-webkit-scrollbar,
.Expand::-webkit-scrollbar {
    display: none;
}