:root {
    --tabWidth: 135px;
    --tabRotate: -1deg;
}

body {
    background-color: #000;
    background-image: url(backgroundLow.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    margin: 0;
    font-family: Inter;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    overflow: hidden;
}
.backgroundHigh {
    background-image: url(backgroundHigh.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}



/* ------------------------ Header ------------------------ */

#header {
    background-color: #14141480;
    width: 100%;
    height: 72px;
    top: 0px;
    position: absolute;
    display: flex;
    border-bottom: 2px solid #00000040;
    box-shadow: 0px 0px 16px 4px #00000033;
}

.logo {
    width: 270px;
    height: 45px;
    top: 14px;
    left: 13px;
    position: absolute;
}

#tabContainer {
    height: 38px;
    margin-top: 17px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.tabButton {
    background-color: #00000000;
    color: #FFF;
    width: var(--tabWidth);
    height: 100%;
    margin: 0px 2.5px 8px 2.5px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.08s ease-out, box-shadow 0.08s ease-out, transform 0.08s ease-out;
}
.tabButton:hover {
    box-shadow: inset 0 0 0 3px #FFFFFF12;
}

#socialContainer {
    width: 120px;
    height: 32px;
    top: 20px;
    right: 16px;
    position: absolute;
    display: flex;
}
.socialButton {
    background-repeat: no-repeat;
    background-position: center;
    width: 50%;
    height: 100%;
    transition: 0.1s ease-out;
}
.socialButton:hover {
    filter: brightness(80%);
    transform: rotate(-7deg) translateY(0.5px);
}
.socialButton:active {
    filter: brightness(70%);
}



/* ------------------------ Main window ------------------------ */

#mainContainer {
    width: 440px;
    height: 575px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
}

.box {
    background-color: #14141480;
    width: 440px;
    position: absolute;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #00000040;
}
.icon {
    padding-top: 16px;
    padding-left: 16px;
}
.boxLabel {
    color: #FFF;
    text-align: center;
    padding-top: 17.5px;
    padding-left: 10px;
    font-size: 17px;
    position: absolute;
    display: inline-block;
}

#mainBox {
    height: 451px;
    box-shadow: inset 0 0 0 2px #00000040, 0px 0px 16px 4px #00000033;
}



.listBox {
    width: 408px;
    height: 381px;
    margin: 16px;
    margin-top: 10px;
}
/* This is separated so that the styles don't get overrided by the transparent scrollbar */
.entryContainer {
    width: 105%;
    height: calc(100% - 15px);
    margin-top: 2px;
    padding-top: 2px;
    padding-bottom: 9px;
    overflow: auto;
    scrollbar-color: transparent transparent;
}
#entryContainer::-webkit-scrollbar {
    width: 0px;
}


.textContainer {
    display: none;
    width: 95%;
    color: #FFF;
    padding-left: 12px;
    padding-top: 5px;
    user-select: text;
    padding-bottom: 6px;
}
a[link] {
    text-decoration: underline;
    color: #00847DC9;
}
a[link]:hover {
    color: #00847E;
}


.listEntry {
    background-color: #00000000;
    width: 379px;
    height: 24px;
    margin: 7px 0px 0px 11px;
    padding-top: 4px;
    padding-left: 7px;
    border-radius: 4px;
    color: #FFF;
    font-size: 16px;
    display: block;
    outline: 0px solid #FFFFFF2B;
}
.listEntry:hover {
    background-color: #45454520;
}
.listEntry:active {
    animation: outlineAnimation 0.15s forwards;
}
@keyframes outlineAnimation {
    0% {
        outline: 0px solid #FFFFFF2B;
    }
    75% {
        outline: 0px solid #FFFFFF2B;
    }
    100% {
        outline: 2px solid #FFFFFF2B;
    }
}



.downloadBox {
    height: 108px;
    bottom: 0px;
    box-shadow: inset 0 0 0 2px #00000040, 0px 0px 16px 4px #00000033;
}

.downloadButton {
    color: #FFF;
    bottom: 0px;
    width: 196px;
    height: 36px;
    margin: 16px;
    position: absolute;
    border-radius: 4px;
    cursor: pointer;
    font-family: Inter;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.1s ease, background-color 0.05s ease, opacity 0.2s ease, outline 0.05s ease;
}

.download1 {
    background-color: #00847E;
    right: 0px;
    outline: 0px solid #00847E;
}
.download1:hover {
    background-color: #00847E90;
}
.download1:active {
    background-color: #00847E50;
    outline: 3px solid #00847E;
}

.download2 {
    background-color: #2F4342;
    left: 52px;
    outline: 0px solid #2F4342;
}
.download2:hover {
    background-color: #2F434290;
}
.download2:active {
    background-color: #2F434250;
    outline: 3px solid #2F4342;
}

.info {
    background-color: #FFFFFF0D;
    background-image: url(info.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 36px;
    left: 0px;
    outline: 0px solid #FFFFFF0D;
    transition: 0.2s ease, outline 0.05s ease;
}
.info:hover {
    background-color: #FFFFFF13;
}
.info:active {
    background-color: #FFFFFF1A;
    outline: 3px solid #FFFFFF0D;
}



.loading {
    color: #FFF;
    width: auto;
    height: auto;
    padding: 17px;
    padding-top: 13px;
    padding-bottom: 11px;
    bottom: 16px;
    right: 16px;
    position: absolute;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px #00000040, 0px 0px 16px 4px #00000033;
    transition: 1s ease;
}



#serverInfo {
    display: none;
    color: #FFF;
    position: absolute;
    user-select: text;
    bottom: 24px;
    left: 24px;
    padding: 2px 16px;
    width: 270px;
    height: 235px;
    box-shadow: inset 0 0 0 2px #00000040, 0px 0px 16px 4px #00000033;
    justify-content: center;
    font-size: 16px;
    scrollbar-color: transparent transparent;
    overflow: hidden;
}

#expandServers {
    display: none;
    font-size: 22px;
    user-select: none;
    cursor: pointer;
    padding: 12px 0px 0px;
}

hr {
    margin: 6px 0px 0px;
}