/* IE, Edge hide scrollbar */
body {
    -ms-overflow-style: none;
    background: var(--black);
    user-select: none;
    overflow-x: hidden;
    margin: 0;
}

/* chrome/Safari hide scrollbar */
body::-webkit-scrollbar {
    scrollbar-width: none;
}

.lander {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.landingBackground {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    object-fit: cover;
    animation: none;
}

.landerLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    width: 70vmin;
    max-width: 100%;
    scale: 1.0;
    translate: -50% -50%;
    transition: scale 0.1s ease-in-out;
}

.landerLogo:hover, .landerSmallLogo:hover {
    scale: 1.01;
}

.landerSmallLogo {
    position: absolute;
    top: -1.5vh;
    left: 4vw;
    width: 15vmin;
    transition: scale 0.1s ease-in-out;
    z-index: 2;
}

.landerSmallLogo:hover {
    opacity: 0.9;
    transition: opacity 0.1s;
    cursor: pointer;
}

.shadow {
    filter: drop-shadow(10px 5px 2px var(--black));
}

.smallShadow {
    filter: drop-shadow(5px 2px 1px var(--black));
}

.smallerShadow {
    filter: drop-shadow(2px 1px 0.5px var(--black));
}

.iconShadow {
    filter: drop-shadow(1px 1px 6px var(--black));
}

.fadeIn {
    animation: fadeIn 0.25s forwards;
}

.fadeOut {
    animation: fadeOut 0.25s forwards;
}

.navigation {
    position: absolute;
    top: 0vh;
    left: 0;
    width: 100%;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8vw;
    padding: 3.5vh 0vw;
    z-index: 1;
    background: rgba(0, 0, 0, 1);
}

.navButton {
    position: relative;
    text-decoration: none;
    font-family: var(--semifont);
    color: var(--white);
    text-transform: uppercase;
    font-size: 1.8vmin;
    letter-spacing: 2px;
    text-shadow: black 1px 0 10px;
    right: 15vw;
    top: 0.3vh;
}

.navButton:hover {
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-underline-offset: 0.4vmin;
    text-decoration-thickness: 3px;
    transition: 0.3s ease-in-out;
    transform: scale(1.2);
}

.serverStatusBox {
    position: absolute;
    width: 17vw;
    height: 8vh;
    bottom: 10vh;
    left: 12vw;
    user-select: none;
}

.serverStatusBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    transform: skew(-32deg);
    box-shadow: 10px 3px 0px 3px var(--yellow);
    z-index: 1;
}

.serverStatusBoxBorder {
    position: absolute;
    width: 22vw;
    height: 5vh;
    bottom: 10vh;
    left: 10vw;
    user-select: none;
}

.startBox {
    position: absolute;
    width: 25vw;
    height: 16vh;
    bottom: 8vh;
    right: 8vw;
    user-select: none;
}

.startBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--yellow-light);
    transform: skew(-32deg);
    border: 2px solid var(--yellow-light);
    z-index: 1;
}

.startBorderBox {
    position: absolute;
    width: 25vw;
    height: 16vh;
    bottom: 6vh;
    right: 10vw;
    user-select: none;
}

.startBorderBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--yellow);
    transform: skew(-32deg);
}

.serverState {
    position: relative;
    color: var(--white);
    font-family: var(--boldfont);
    font-size: 5.5vmin;
    text-align: center;
    left: 2.5vw;
    bottom: 4vh;
    z-index: 2;
    text-transform: uppercase;
}

.serverStatus {
    position: absolute;
    color: var(--yellow);
    font-family: var(--regularfont);
    font-size: 2vmin;
    text-align: center;
    left: 11vw;
    bottom: 0.2vh;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 3;
    text-transform: uppercase;
}

.statusHeli {
    position: absolute;
    bottom: 2vmin;
    left: -9vmin;
    width: 12vi;
    width: 12vw;
    z-index: 10;
    transition: scale 0.2s;
}

.statusHeli:hover {
    cursor: pointer;
    scale: 1.1;
}

.playnow {
    position: absolute;
    font-family: var(--boldfont);
    color: var(--white);
    font-size: 1.8vmin;
    text-transform: uppercase;
    left: 50%;
    top: 6vh;
    z-index: 5;
    text-align: center;
    width: 25vw;
    transform: translate(-50%, -50%);
    line-height: 2.5vmin;
    letter-spacing: 2px;
}

.buttonContainer {
    position: absolute;
    z-index: 1;
    padding: 1vw;
    display: flex;
    gap: 2.5em;
    align-items: center;
    justify-content: center;
    bottom: 1.5vh;
    left: 0.8vw;
}

.buttonBox {
    position: relative;
    width: 8vw;
    height: 4vh;
    bottom: -2.2vh;
    right: 0vw;
    user-select: none;
    text-align: center;
    display: grid;
    align-items: center;
}

.buttonClick {
    position: relative;
    font-family: var(--regularfont);
    left: 0.5vw;
    color: var(--black);
    text-decoration: none;
    font-size: 2vmin;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    z-index: 1;
}

.buttonBox:hover::before {
    cursor: pointer;
    background-color: var(--black);
}

.buttonBox:hover .buttonClick {
    color: white !important;
}

.buttonBox:hover .sixmLogo, .buttonBox:hover .discordLogo {
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}

.buttonBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--yellow);
    transform: skew(-32deg);
    z-index: 1;
}

.sixmLogo {
    position: absolute;
    left: 3vb;
    top: 2.1vb;
    width: 1.3vi;
    transform: translate(0%, -50%);
    z-index: 1;
}

.discordLogo {
    position: absolute;
    left: 2vb;
    top: 2.1vb;
    width: 1.3vi;
    transform: translate(0%, -50%);
    z-index: 1;
}

.socialBox {
    position: absolute;
    top: 2.5vh;
    right: 10vh;
    width: 20vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vmin;
    z-index: 5;
}

.youtubeIcon, .twitchIcon, .facebookIcon, .discordIcon, .tiktokIcon {
    position: relative;
    width: 6vmin;
    height: 6vmin;
    z-index: 10;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.youtubeIcon {
    background-image: url("../images/socials/youtubeWhite.png");
}

.youtubeIcon:hover {
    cursor: pointer;
    background-image: url("../images/socials/youtubeYellow.png");
}

.twitchIcon {
    background-image: url("../images/socials/twitchWhite.png");
}

.twitchIcon:hover {
    cursor: pointer;
    background-image: url("../images/socials/twitchYellow.png");
}

.facebookIcon {
    background-image: url("../images/socials/facebookWhite.png");
}

.facebookIcon:hover {
    cursor: pointer;
    background-image: url("../images/socials/facebookYellow.png");
}

.discordIcon {
    background-image: url("../images/socials/discordWhite.png");
}

.discordIcon:hover {
    cursor: pointer;
    background-image: url("../images/socials/discordYellow.png");
}

.tiktokIcon {
    background-image: url("../images/socials/tiktokWhite.png");
}

.tiktokIcon:hover {
    cursor: pointer;
    background-image: url("../images/socials/tiktokYellow.png");
}

.unavailable:hover {
    cursor: not-allowed;
    text-decoration: none;
}

.arrowImage {
    position: absolute;
    right: 0;
    top: calc(50% - 25vh);
    width: 10vmin;
    z-index: 10;
    opacity: 0;
    /* invisible padding to make the hover effect possible */
    padding-top: 20vh;
    padding-bottom: 20vh;
    padding-left: 8vw;
    transition: opacity 0.2s;
}

.arrowImage:nth-child(2) {
    left: 0;
    top: calc(50% - 25vh);
    transform: rotate(180deg);
}

.arrowImage:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

@keyframes fadeOut {
    100% {
        opacity: 0.05
    }
    0% {
        opacity: 1.0
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1.0
    }
    0% {
        opacity: 0.0
    }
}

.noportrait {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 500;
    display: grid;
    justify-content: center;
    align-items: center;
}

.noportrait-title {
    position: relative;
    font-family: var(--regularfont);
    color: var(--white);
    font-size: 2vmin;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 1vh;
}

.noportrait-gif {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 30vmin;
    transform: translate(-50%, -50%);
    animation: fadeOut 1s infinite;
}

.noportrait-content {
    position: relative;
    top: 50%;
}

@media (min-width: 768px) {
    .noportrait {
        display: none;
    }
}

@media (max-width: 768px) {
    .noportrait {
        display: block;
        overflow: hidden;
        position: fixed;
    }
}