@font-face {
    font-family: "Horizon";
src:
url("../assets/horizon.otf")
}

@font-face {
    font-family: "Poppins";
    font-weight: 400;
    src:
            url("../assets/Poppins-Regular.ttf")
}

@font-face {
    font-family: "Poppins";
    font-weight: 500;
    src:
            url("../assets/Poppins-Medium.ttf")
}

@font-face {
    font-family: "Poppins";
    font-weight: 600;
    src:
            url("../assets/Poppins-SemiBold.ttf")
}

@font-face {
    font-family: "Poppins";
    font-weight: 700;
    src:
            url("../assets/Poppins-Bold.ttf")
}

@font-face {
    font-family: "Poppins";
    font-weight: 800;
    src:
            url("../assets/Poppins-Black.ttf")
}

body {
    background-color: black;

}

.logo {
    margin: 5% 0 2.5% 0;
    width: 15%;
    height: auto;
}
.wrappedImg {
    overflow: hidden;
    width: 30%;
    float: left;
    text-align: center;
}

.avatar {
    filter: drop-shadow(2px 0 0 #ffff00)
    drop-shadow(0 2px 0 #ffff00)
    drop-shadow(-2px 0 0 #ffff00)
    drop-shadow(0 -2px 0 #ffff00);
    float: left;
    width: 100%;
    height: auto;
}

.yellowBg {
    background-color: #ffff00;
}
.yellowText {
    color: #ffff00;
}

.section {
    font-family: "Poppins";
    font-weight: 700;
    font-size: 1.5em;
    color: white;

}
.summarySection {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5% 10%;
}
h1 {
    color: #ffff00;
    font-family: Horizon;
    word-break: break-word;
    margin-bottom: 5%;
    padding-left: 50px;
    color: black;
    text-shadow:
            0 0 3px #fff,
            0 0 5px #ffff00,
            0 0 15px #ffff00,
            0 0 20px #ffff00
}
h3 {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 1.6em;
}
.title {
    color: white;
    font-family: "Poppins";
    font-weight: 700;
    font-size: 5em;
}
.yellowNeon {
    margin-top: 30px !important;
    border-radius: 50px;
    border: #fff 5px solid;
    box-shadow: 0 0 .1rem #fff,
    0 0 .1rem #fff,
    0 0 1rem #ffff00,
    0 0 0.5rem #ffff00,
    0 0 2rem #ffff00,
    inset 0 0 1.3rem #ffff00;
    z-index: 98;
}

.highlights {
    background-color: #ffff00;
    color: black;
}
a {
    text-decoration: none;
}
.textSection {
    float: right;
    width: 70%;
    padding-left: 5%;
}
.socialSection img  {
    width: 100%;
    height: auto;
    padding: 5%;
}
.decalSection img {
    width: 100%;
    height: auto;
    padding: 10%;
}
.socialSection {

}
.online {
    /*display: none;*/
    visibility: hidden;
    max-height: 0;
}
.onlineTitle {
    font-family: Horizon;
    color: white;
    font-size: 2.5em;
}
.flash {
    padding-right: 15px;
    animation-duration: 1s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
}
@keyframes clignoter {
    0%   { opacity:1; }
    50%   {opacity:0; }
    100% { opacity:1; }
}
#twitch-embed{
    text-align: center;
}
footer {
    color: black;
    margin-top: 5%;
    padding: 2.5%;
}
footer .social {
    margin-top: 2%;
    text-align: center;
}
footer .social a {
    padding: 0.5%
}
img {
    width: 100%;
}
.supportSection img {
    border-radius: 25px;
}
::-moz-selection { /* Code for Firefox */
    color: black;
    background: #ffff00;
}

::selection {
    color: black;
    background: #ffff00;
}
.tiktokLive {
    background-color: #ffff00;
    color: black;
    border-radius: 25px;
    padding: 2%;
    margin: 3% 2%;
    width: max-content;
    font-family: Poppins;
    font-size: 1.5em;
    font-weight: 600;
    display: inline-block;
}
.container {
    margin-top: 10%;
}
div#onlineContainer {
    margin-top: 0;
}
a {
    color: black;
}
.containerMargin {
    margin-top: 10% !important;
}
.signature {
    width: 250px;
    height:auto;
}
.ny {
    font-size: 0.95em;
}
@media screen and (max-width: 800px) {
    .ny {
        font-size: 0.8em;
    }
    .signature {
        width: 150px;
        height:auto;
    }
    div.Layout-sc-1xcs6mc-0.hsXgFK {
        display: none !important;
    }
    .col-sm-12 {
        padding: 2%;
    }

    .onlineTitle {
        font-size: 1.6em;
    }
    .tiktokLive {
        padding: 3%;
        font-size: 1em;
        margin: 5% auto;
    }
    h1 {
        margin: 5% auto;
        padding-left: 0;
        font-size: 1.8em;
        text-align: center;
    }
    .title {
        font-size: 2.8em;
    }

    .section {
        font-size: 1.1em;
        padding: 5% 5%;
        display: block;
    }
    .container {
        margin: 20% auto;
    }
    .containerMargin {
        margin-top: 20% !important;
    }
    .wrappedImg {
        text-align: center;
        float: initial;
        width: 60%;
        margin: 5% auto;
    }
    .wrappedImg > img {
        width: 100%;
    }
    .textSection {
        float: initial;
        margin-top: 50px;
        width: 100%;
    }
    .logo {
        width: 30%;
    }
    .decalSection img {
        width: 100%;
        height: auto;
        padding: 2% 7%;
    }
    footer {
        margin-top: 5%;
        padding: 2.5%;
    }
    footer .social {
        margin: 2% auto;
        text-align: center;
    }
    footer .social a i.fa-xl {
        font-size: 1em;
    }
    h3 {
        font-size: 1em;
    }
    footer {
        margin-top: 5%;
        padding: 1%;
        padding-top: 2.5%;
    }
    footer .social {
        margin-top: 1%;
        text-align: center;
    }
}
@media screen and (min-width: 800px) and (max-width: 1100px) {
    .signature {
        width: 150px;
        height:auto;
    }
    .onlineTitle {
        font-size: 1.65em;
    }
    .title {
        font-size: 3em;
    }
    .section {
        font-size: 1.05em;
    }
    h1 {
        margin-bottom: 3.5%;
        font-size: 1.65em;
    }

}

@media screen and (min-width: 1100px) and (max-width: 1200px) {
    .signature {
        width: 150px;
        height:auto;
    }
    .section {
        font-size: 1.15em;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1350px) {
    .signature {
        width: 150px;
        height:auto;
    }
    .section {
        font-size: 1.25em;
    }
}