@font-face {
    font-family: 'Akrobat Thin';
    src: url("assets/fonts/Akrobat-Thin.otf");
}

@font-face {
    font-family: 'Akrobat Normal';
    src: url("assets/fonts/Akrobat-SemiBold.otf");
}

@font-face {
    font-family: 'Akrobat Bold';
    src: url("assets/fonts/Akrobat-Black.otf");
}

* {
    --color-dark: rgb(0 0 0 / 40%);
    --color-cash: rgb(95 186 95 / 100%);

    --color-accent: rgb(24, 151, 201);
    --color-danger: rgb(177, 68, 68);
    --color-warning: rgb(233, 198, 0);
    --color-success: rgb(64, 206, 51);

    --color-chat-1: #cd5c5c;
    --color-chat-2: #1eff00;
    --color-chat-3: #ffff00;
    --color-chat-4: #1e90ff;
    --color-chat-5: #1d6499;
    --color-chat-6: #ff0000;
    --color-chat-8: #21a642;
    --color-chat-9: #ff9d00;

    --color-purple: rgb(165, 14, 170);
    --color-orange: rgb(255, 115, 0);
    --color-darkaqua: rgb(0, 100, 145);

    --text-shadow-big: 0px 0px 0.8vh rgb(0 0 0 / 15%), 0px 0px 0.8vh rgb(0 0 0 / 100%);
    --text-shadow-small: 0px 0px 0.8vh rgb(0 0 0 / 55%), 0px 0px 0.3vh rgb(0 0 0 / 10%);
    --box-shadow: -1px -1px 25px 0px rgb(0 0 0);
}

.footer {
    position: relative;
    bottom: 1vh;
}

body {
    box-sizing: border-box;
    background: url("assets/background.jpg") no-repeat fixed 50%;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0;
}

.container {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    display: flex;
    min-height: 100vh;
    backdrop-filter: blur(10px);
}

.container img {
    user-select: none;
    width: 20vw;
    height: 20vw;
    transition: .3s linear;
    filter: drop-shadow(0px 0px 15px rgb(0 0 0 / 30%));
}

.connected-players .server-name {
    font-family: "Akrobat Thin", sans-serif;
    text-shadow: var(--text-shadow-small);
    font-style: italic;
    font-size: 3.5vh;
}

.connected-players .server-desc {
    font-family: "Akrobat Thin", sans-serif;
    text-shadow: var(--text-shadow-small);
    padding-bottom: 5vh;
    /* font-style: italic; */
    color: rgb(197 197 197);
    font-size: 2.6vh;
    position: relative;
    top: -1.8vh;
}

.connected-players .server-name a {
    outline: none;
    text-decoration: none;
    opacity: .5;
    color: white;
    font-style: normal;
    transition: .1s linear
}

.connected-players .server-name a i {
    font-size: 2.2vh;
}

.connected-players .server-name a:hover {
    opacity: 1;
}

.connected-players {
    user-select: none;
    /* background: rgb(24 151 201 / 35%); */
    padding-left: 4vw;
    padding-right: 4vw;
    border-radius: .5vw;
    color: white;
    text-shadow: var(--text-shadow-big);
    text-align: center;
}

.connected-players .buttons-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 43vw;
}

.connected-players button {
    margin-left:.5vw;
    margin-right: .5vw
}

.connected-players .connect {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(40 255 136 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(40 255 136 / 55%);
    border-radius: 1vh;
    width: 13vw;
}

.connected-players .connect:hover {
    background-color: rgb(40 255 136 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players .wiki {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(0 217 255 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(0 217 255 / 55%);
    border-radius: 1vh;
    width: 10vw;
}

.connected-players .wiki:hover {
    background-color: rgb(0 217 255 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players .discord {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(88 101 242 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(88 101 242 / 55%);
    border-radius: 1vh;
    width: 13vw;
}

.connected-players .discord:hover {
    background-color: rgb(88 101 242 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players .youtube {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(255 0 0 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(255 0 0 / 55%);
    border-radius: 1vh;
    width: 13vw;
}

.connected-players .youtube:hover {
    background-color: rgb(255 0 0 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players .instagram {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(201 24 133 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(201 24 133 / 55%);
    border-radius: 1vh;
    width: 13vw;
}

.connected-players .instagram:hover {
    background-color: rgb(201 24 133 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players .tiktok {
    padding: 1vw;
    font-size: 3vh;
    font-family: "Akrobat Normal", sans-serif;
    color: white;
    background-color: rgb(180 76 184 / 45%);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
    margin-bottom: 5vh;
    box-shadow: 0px 0px 20px 5px rgb(180 76 184 / 55%);
    border-radius: 1vh;
    width: 10vw;
}

.connected-players .tiktok:hover {
    background-color: rgb(180 76 184 / 90%);
    font-size: 3.2vh;
    cursor: pointer;
}

.connected-players h2 {
    top: 16vh;
}

.connected-players .text {
    font-family: "Akrobat Thin", sans-serif;
    font-weight: 200;
    font-size: 5vh;
    margin: 0;
    transform: skewX(-10deg);
}

.connected-players .online {
    margin-top: -2vh;
    text-shadow: var(--text-shadow-big) !important;
}

.connected-players .bold {
    font-family: "Akrobat Normal", sans-serif;
    font-weight: 1000;
}

.connected-players .slots {
    color: gray;
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;

    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    transition: 1.5s linear;
}

@keyframes fadeInDown {
    0% {
       opacity: 0;
       transform: translateY(-25vh);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
}


.anticheat {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    align-items: center;
}
.anticheat img {
    position: fixed;
    width: 100%;
    z-index: -1;
}
.anticheat h1 {
    color: white;
    font-size: 4vw;
    font-family: Arial;
    text-shadow: 0 0 20px black;
    margin-top: 35vh;
}
.anticheat h2 {
    color: #ff0000;
    font-size: 4vw;
    font-family: Arial;
    text-shadow: 0 0 20px black;
}