@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(css/menu.css);
@import url(css/live-map.css);
@import url(css/status-card.css);
@import url(css/buttons.css);

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' -25,
    'opsz' 48
  }

body{
    margin: 0!important;

    background: url("images/wallpaper.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;

    font-family: 'Minecraft', sans-serif!important;
}

#status{
    background: linear-gradient(360deg, rgba(16,16,16, 1) 0%, rgba(16,16,16, 0.20) 100%);
    height: 100vh;
    min-height: 720px;
}
#rules{
    background-color: var(--cvsz-gray);

    padding-bottom: 1.5rem;
    /* min-height: 100vh; */

    scroll-margin: 3.75rem 0 0 0!important;
}
#whitelist{
    background-color: #00000080;

    padding-bottom: 1.5rem;
    min-height: 100vh;

    scroll-margin: 3.75rem 0 0 0!important;
}

.logo{
    width: 90%;
    height: auto;
    margin-top: -1.5rem;
    margin-left: auto!important;
    margin-right: auto!important;
    max-width: 512px!important;
    transition: var(--transition);
}

.title{
    width: fit-content!important;
    color: var(--cvsz-orange);
    font-weight: 600;
    font-size: 1.75rem!important;
    line-height: 1.75rem!important;
    margin: 0!important;
    padding: 0!important;
}
.title-2{
    width: fit-content!important;
    color: var(--cvsz-orange);
    font-weight: 600;
    font-size: 1.5rem!important;
    line-height: 1.5rem!important;
    margin: 0!important;
    padding: 0!important;
}
.title-3{
    width: fit-content!important;
    color: var(--cvsz-orange);
    font-weight: 500;
    font-size: 1.25rem!important;
    line-height: 1.25rem!important;
    margin: 0!important;
    padding: 0!important;
}

button, input{
    padding: 16px 24px!important;
    border-radius: 0!important;
    border: none!important;
}
button{
    background: var(--cvsz-orange)!important;
    color: black;
}
input{
    width: 100%;
    max-width: 320px;
}
button:focus, input:focus, button:hover{
    outline: none;
    box-shadow: none;
    border: none;
}
.refresh-button{
    opacity: .5;
    font-size: 1.25rem!important;
    line-height: 1.25rem!important;
    margin: 0!important;
    color: #ddd;
    cursor: pointer;
    transition: var(--transition);
}
.refresh-button:hover{
    opacity: 1;
    color: var(--cvsz-orange);
    transition: var(--transition);
}

.delay-1{
    transition-delay: .2s!important;
}
.delay-2{
    transition-delay: .35s!important;
}
.delay-3{
    transition-delay: .5s!important;
}
.delay-4{
    transition-delay: .65s!important;
}
.delay-5{
    transition-delay: .8s!important;
}
.delay-6{
    transition-delay: 1.05s!important;
}

.nopa{
    padding: 0!important;
}
.noma{
    margin: 0!important;
}

.lh-1{
    line-height: 1rem;
}
.fw-500{
    font-weight: 500!important;
}
.fw-550{
    font-weight: 550!important;
}
.fw-600{
    font-weight: 600!important;
}

.flex-col{
    flex-direction: column!important;
}

.mx-0{
    margin-left: 0!important;
    margin-right: 0!important;
}

@media (max-width: 767.98px) { 
    .logo{
        margin-top: -3rem;
    }
    #rules{
        scroll-margin: 0 0 0 0!important;
    }
}


:root{
    --cvsz-orange-rgb: 91, 135, 49;
    --cvsz-orange: rgb(var(--cvsz-orange-rgb));

    --obj-border: 1rem;
    --obj-border-2: calc(var(--obj-border) / 2);

    --cvsz-gray-rgb: 24, 24, 24;
    --cvsz-gray: rgb(var(--cvsz-gray-rgb));

    --cvsz-white-rgb: 221, 221, 221;
    --cvsz-white: rgb(var(--cvsz-white-rgb));

    --cvsz-green-rgb: 0, 170, 0;
    --cvsz-green: rgb(var(--cvsz-green-rgb));

    --cvsz-red-rgb: 200, 20, 0;
    --cvsz-red: rgb(var(--cvsz-red-rgb));

    --transition-slow: all 1.25s cubic-bezier(0,.75,.25,1);
    --transition: all 1s cubic-bezier(0,.75,.25,1);
    --transition-fast: all .5s cubic-bezier(0,.5,.5,1);
    --transition-super-fast: all .25s cubic-bezier(0,.5,.5,1);
}

.color-white{
    color: var(--cvsz-white)!important;
}