html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    background: url("images/Background.png") no-repeat center top;
    background-size: cover;
    background-color: black;
    color: black;
}


/* Logo */

.site-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-logo-wrap {
    width: 600px;
    height: 260px;
    overflow: hidden;
}

.site-logo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -178px;
}


/* Navigation */

.game-nav {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}


.nav-box {
    display: inline-block;
    padding: 14px 40px;
    font-family: 'Skranji', cursive;
    font-size: 40px;
    color: #e8e8ff;
    text-decoration: none;
    text-align: center;

    background: linear-gradient(
        180deg,
        #7b7bd6 0%,
        #4a4aa8 45%,
        #3a3a8c 55%,
        #2b2b6e 100%
    );

    border: 3px solid #1c1c4d;
    border-radius: 4px;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -3px 4px rgba(0,0,0,0.4),
        2px 3px 0 #16163d;

    transition: transform .1s ease;
}


.nav-box:hover {
    transform: translateY(-5px);
}


.nav-box.active {
    background: linear-gradient(
        180deg,
        #ffd76b 0%,
        #e0a72a 45%,
        #c98f1a 55%,
        #a8760f 100%
    );

    color: #2b1d00;
}


/* Main UI Image */

.ui-container {
    width: 1200px;
    margin: 40px auto 0;
}

.ui-background {
    width: 100%;
    display: block;
}


.aui-container {
    width: 90%;
    max-width: 1000px;
    margin: 150px auto 0;
    position: relative;
    transform: scaleX(0.82) scaleY(1.18);
    transform-origin: top center;
}

.aui-background {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


.banner-characters {
    display: block;
    margin: 280px auto 0;
    max-width: 62%;
    height: auto;
}



hr {
    margin-top: 0;
    margin-bottom: 0;

    border: none;
    border-top: 4px solid #E4DABD;

    box-shadow:
        0 -2px 0 #3C4383,
        0 2px 0 #3C4383;
}




.site-footer {
    width: 100%;
    padding: 20px 0 45px;

    background-color: #3C4383;
    color: #E4DABD;

    text-align: center;

    font-family: "Skranji", cursive;
    font-size: 16px;

    position: relative;
}


.bsi-logo {
    position: absolute;
    bottom: 5px;
    left: 20px;

    width: 120px;
}


.cyberfun-logo {
    position: absolute;
    bottom: 8px;
    right: 20px;

    width: 135px;
}

.ui-container {
    position: relative;
    width: 1200px;
    margin: -280px auto 0;
}

.ui-background {
    width: 100%;
    display: block;
}

.title {
    position: absolute;
    top: 27.5%;
    left: 33.8%;
}

.title p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
}

.atitle {
    position: absolute;
    top: 1.8%;
    left: 33%;
}

.atitle p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
}

.info {
    position: absolute;
    top: 980px;
    left: 50%;
    transform: translateX(-50%);
    width: 1050px;
}

.info p {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: 30px;
}

.jack {
    position: absolute;
    top: 69.1%;
    left: 7.5%;
    width: 25.1%;
    height: 11.3%;
}

.felix {
    position: absolute;
    top: 79.31%;
    left: 67.4%;
    width: 25.1%;
    height: 11.3%;
}
.both {
    position: absolute;
    top: 33.4%;
    left: 29%;
    width: 40%;
    height: 19.5%;
}

.infonext {
  position: absolute;
  top: 68.8%;
  left: 33.6%;
  width: 61.3%;

  max-height: 12%;
  overflow-y: auto;
  overflow-x: hidden;
}

.infonext p {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: 28px;
}

.infothree {
  position: absolute;
  top: 82.3%;
  left: 6%;
  width: 60%;
  max-height: 15%;
  overflow-y: auto;
  overflow-x: hidden;
}
.infothree p {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: 27.13px;
}

.socialinfo {
    position: absolute;
    top: 600px;
    left: 50.4%;
    transform: translateX(-50%);
    width: 770px;
}

.socialinfo p {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: 30px;
}



.names {
    position: absolute;
    top: 0%;
    left: 0%;
}

.names p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 26px;
}
.bon {
    position: absolute;
    top: 3%;
    left: 4%;
    width: 10%;
    height: 13%;
    border: 2px solid #3C4383;
}
.bonname {
    position: absolute;
    top: 16.5%;
    left: 4%;
    width: 22%;
    height: 9%;
}

.bonname p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
    background: #21746C;
}

.boninfo {
    position: absolute;
    top: 5%;
    left: 16%;
    width: 80%;
    height: 11%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.boninfo p {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.banny {
    position: absolute;
    top: 26%;
    left: 4%;
    width: 10%;
    height: 13%;
    border: 2px solid #3C4383;
}

.bannyname {
    position: absolute;
    top: 39.5%;
    left: 4%;
    width: 30%;
    height: 3.1%;
    background: #4A275A;
}

.bannyname p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
}

.bannyinfo {
    position: absolute;
    top: 26%;
    left: 16%;
    width: 80%;
    height: 11%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.bannyinfo p {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sha {
    position: absolute;
    top: 52%;
    left: 4%;
    width: 10%;
    height: 13%;
}

.shaname {
    position: absolute;
    top: 65.5%;
    left: 4%;
    width: 23%;
    height: 3%;
    background: #D5B795;
}

.shaname p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
}

.shainfo {
    position: absolute;
    top: 52%;
    left: 16%;
    width: 80%;
    height: 8.5%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.shainfo p {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.boozoo {
    position: absolute;
    top: 75%;
    left: 4%;
    width: 10%;
    height: 13%;
    border: 2px solid #3C4383;
}

.boozooname {
    position: absolute;
    top: 88.5%;
    left: 4%;
    width: 40%;
    height: 3%;
    background: #A54236;
}

.boozooname p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 36px;
}

.boozooinfo {
    position: absolute;
    top: 75%;
    left: 16%;
    width: 80%;
    height: 8.5%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.boozooinfo p {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.social-buttons {
    position: relative;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 80%;
}

.social-buttons img[src="images/Discord.png"] {
    width: 112px;
    height: 112px;
}

.social-buttons {
    position: absolute;
    top: 1360px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 1000;
}

.social-buttons img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.social-buttons img:hover {
    transform: scale(1.1);
}

/* Scrolling Banner */

.scroll-bar {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 365px;

    background: #3C4383;

    border-top: 4px solid #E4DABD;
    border-bottom: 4px solid #E4DABD;
}


.scroll-text {
    white-space: nowrap;

    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 70px;

    color: white;
    line-height: 1;

    animation: scroll-horizontal 10s linear infinite;
}

.scroll-bar-track {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


@keyframes scroll-horizontal {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-100vw);
    }
}

.copyright-claim {
    width: 100%;
    text-align: center;

    margin-top: 10px;

    font-family: 'Skranji', cursive;
    font-size: 14px;

    color: #cfcfcf;

    text-shadow:
        1px 1px 2px black,
        0 0 5px rgba(255,255,255,0.2);

    opacity: .85;
}

html, body {
    overflow-x: hidden;
}



@media (max-width: 768px) {

    .site-logo-wrap {
        width: 90%;
        height: auto;
    }

    .site-logo {
        margin-top: -28%;
    }

.game-nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 6px;
    width: 96%;
    margin: 15px auto;
}

.nav-box {
    width: 22%;
    padding: 8px 0;
    font-size: clamp(12px, 2.6vw, 18px);
    box-sizing: border-box;
}

    .banner-characters {
        max-width: 95%;
        margin-top: 30px;
    }

    .ui-container,
    .aui-container {
        width: 105vw;
        margin: 0 auto;
    }

    .ui-background,
    .aui-background {
        width: 105vw;
        height: auto;
    }

    .title,
    .atitle {
        width: 100%;
        left: 0;
        text-align: center;
    }

    .title p,
    .atitle p {
        font-size: 22px;
    }

    .info,
    .infonext,
    .infothree {
        position: absolute;
        width: 90%;
        left: 5%;
    }

    .info p,
    .infonext p,
    .infothree p {
        font-size: 16px;
        line-height: 1.4;
    }

    iframe {
        width: 90% !important;
        left: 5% !important;
        height: 220px !important;
    }

    .ticker-bar,
    .scroll-bar {
        height: 50px;
        top: 220px;
    }

    .ticker-text,
    .scroll-text {
        font-size: 34px;
    }

    .social-buttons {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        justify-content: center;
        margin: 30px auto;
        width: 100%;
        gap: 20px;
    }

    .social-buttons img {
        width: 56px;
        height: 56px;
    }

    .site-footer {
        padding: 20px 10px;
    }

    .bsi-logo,
    .cyberfun-logo {
        position: static;
        display: inline-block;
        width: 70px;
        margin: 10px;
    }

    .copyright-claim {
        font-size: 11px;
    }

}
.title {
    top: calc(27.5% - 5px);
}

@media (max-width: 768px) {

    .bon,
    .banny,
    .sha,
    .boozoo {
        width: 18%;
        height: auto;
    }

    .bonname,
    .bannyname,
    .shaname,
    .boozooname {
        width: 70%;
    }

    .bonname p,
    .bannyname p,
    .shaname p,
    .boozooname p {
        font-size: 20px;
    }

    .boninfo,
    .bannyinfo,
    .shainfo,
    .boozooinfo {
        left: 24%;
        width: 70%;
    }

    .boninfo p,
    .bannyinfo p,
    .shainfo p,
    .boozooinfo p {
        font-size: 15px;
        line-height: 1.3;
    }

    .bon { top: calc(3% + 5px); }
    .bonname { top: calc(15.6% + 23px); }
    .boninfo { top: calc(5% + 5px); }

    .banny { top: calc(26% + 5px); }
    .bannyname { top: calc(38.8% + 22px); }
    .bannyinfo { top: calc(26% + 5px); }

    .sha { top: calc(52% + 5px); }
    .shaname { top: calc(64.6% + 38px); }
    .shainfo { top: calc(52% + 5px); }

    .boozoo { top: calc(75% + 5px); }
    .boozooname { top: calc(87.6% + 18px); }
    .boozooinfo { top: calc(75% + 5px); }

}