@font-face {
    font-family: monserrat;
    src: url(fonts/montserrat-regular.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: monserrat;
    src: url(fonts/montserrat-medium.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: monserrat;
    src: url(fonts/montserrat-semiBold.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: monserrat;
    src: url(fonts/montserrat-bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: monserrat;
    src: url(fonts/montserrat-extraBold.woff2) format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: monserrat-fallback;
    src: local('Arial');
    ascent-override: 67%;
    descent-override: 0;
    line-gap-override: 57%;
}

@font-face {
    font-family: monserrat-fallback;
    src: local('Arial Black');
    ascent-override: 67%;
    descent-override: 0;
    line-gap-override: 57%;
    font-weight: 800;
}

@font-face {
    font-family: inknut antiqua;
    src: url(fonts/inknutAntiqua-SemiBold.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: inknut antiqua;
    src: url(fonts/inknutAntiqua-Bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: inknut antiqua fallback;
    src: local('Times New Roman Bold');
    ascent-override: 94%;
    descent-override: 0;
    line-gap-override: 165%;
    font-weight: 600;
}

@font-face {
    font-family: cinzel;
    src: url(fonts/cinzel-bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: cinzel-fallback;
    src: local('Times New Roman Bold');
    ascent-override: 56%;
    descent-override: 0;
    line-gap-override: 75%;
    font-weight: 800;
}

html {
    color: #291d08;
    font-family: monserrat, monserrat-fallback, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    margin: 0;
    scrollbar-color: #ffce0c #291d08;
}

body {
    color: #291d08;
    font-family: monserrat, monserrat-fallback, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    margin: 0;
    zoom: .8;
    background: url('images/body_bg.png');
    background-size: cover;
    overflow-x: hidden;
}

.zoom-out {
    transform: scale(1);
}

/*.zoom-in {
    transform: scale(.7)
}*/

.zoom-in {
    transform: scale(1.08);
}

.img-hover-zoom {
    transition: transform .5s ease;
}

.header {
    *background: url("images/header_bg.png") no-repeat center top;
    margin-top: 5px;
    min-height: 57px;
    padding: 46px 150px 42px;
}

.logo {
    margin-top: -55px;
}

.server {
    font-family: monserrat, monserrat-fallback, Helvetica, Arial, sans-serif;
    position: relative;
}


.server img {
    max-width: 400px;
}

.server.new img {
    max-width: 435px;
}


/* .server.new:before {
    content: "";
    background: url("./images/server-top.png") no-repeat center top;
    width: 100%;
    height: 153px;
    position: absolute;
    top: -123px;
    display: block;
} */
.server .server-name {
    position: absolute;
    bottom: 20%;
    left: 22px;
    padding: 10px;
    width: 89%;
    height: 65px;
    text-align: center;
    color: #ffce0c;
    font-weight: bold;
    text-shadow: 3px 0 #000;
    font-size: 25px;
}

.server .server-data {
    position: absolute;
    bottom: 5.5%;
    left: 22px;
    padding: 10px;
    width: 89%;
    height: 65px;
    text-align: center;
}

.server .online-since {
    color: #ffce0c;
    font-weight: bold;
    text-shadow: 3px 0 #000;
    font-size: 13px;
    line-height: 35px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.col-gap-40 {
    column-gap: 40px;
}

.row-gap-160 {
    row-gap: 160px;
}

main {
    padding-bottom: 50px;
    margin-bottom: 100px;
}

.landing-footer {
    padding-top: 5px;
    background: #291d08;
    padding-bottom: 24px;
    text-align: center;
}

.landing-footer .copyright {
    color: #ffce0c;
    margin-top: 18PX;
    display: block;
    width: 100%;
    font-weight: bold;
}

.link-list {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-list > a {
    color: #ffce0c;
    text-decoration: none;
}

@media (max-width: 1199px) {
    .header {
        padding: 46px 60px;
    }
}

@media (max-width: 991px) {
    .header {
        padding: 36px 23px;
        background-size: contain;
    }

    .logo {
        margin-top: -75px;
    }

    .logo img {
        width: 250px;
    }

    .server img {
        max-width: 100% !important;
    }
}


@media (max-width: 767px) {
    .header {
        padding: 28px 23px;
        background-size: contain;
    }

    .logo {
        margin-top: -83px;
    }

    .logo img {
        width: 210px;
    }
}


@media (max-width: 550px) {
    .server.new:before {
        content: none;
    }

    .row-gap-160 {
        row-gap: 50px;
    }

    .server .online-since {
        font-size: 20px;
    }
}