@charset "UTF-8";

@font-face
{
    font-family: 'Comfortaa';
    src: url('/fonts/Comfortaa.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

@font-face
{
    font-family: 'Georama';
    src: url('/fonts/Georama.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: normal;
}

@font-face
{
    font-family: 'Georama';
    src: url('/fonts/Georama-Italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: italic;
}

@font-face
{
    font-family: 'Roboto Mono';
    src: url('/fonts/RobotoMono.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

@font-face
{
    font-family: 'Roboto Mono';
    src: url('/fonts/RobotoMono-Italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
}

:root
{
    --c1: 251, 29, 123;
    --c2: 255, 212, 110;
    --c3: 124, 150, 247;
    --c4: 236, 236, 240;
    --c5: 224, 224, 228;
    --c6: 250, 250, 254;
    --c7: 60, 60, 60;
    --f1: 'Georama', sans-serif;
    --f2: 'Comfortaa', cursive;
    --f3: 'Roboto Mono', monospace;
    --gradAngle: 90deg;
}

@supports (backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))
{
    .glass
    {
        background-image: linear-gradient(140deg, rgba(var(--w), 0.24) 0%, rgba(var(--w), 0.4) 40%, rgba(var(--w), 0.24) 60%, rgba(var(--w), 0.1) 100%);
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
    }
}

@supports not ((backdrop-filter: blur(1rem)) and (-webkit-backdrop-filter: blur(1rem)))
{
    .glass
    {
        background-image: linear-gradient(140deg, rgba(var(--w), 0.4) 0%, rgba(var(--w), 0.64) 40%, rgba(var(--w), 0.4) 60%, rgba(var(--w), 0.24) 100%);
    }
}

html
{
    font-size: 16px;
    scrollbar-width: thin;
}

.f2, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
    letter-spacing: -0.02em;
}

.ovAuto
{
    scrollbar-width: thin;
    scrollbar-track-color: transparent;
}

body
{
    background-color: rgb(var(--w));
    color: rgba(var(--c7));
}

body::before
{
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("/imx/bg.webp");
    background-size: cover;
}

::selection
{
    background-color: rgb(var(--c1));
    color: rgb(var(--w));
}

@media only screen
{
    /* For 2 Color Web Schemes Only */

    /*

    body::after
    {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0rem;
        opacity: 0;
        z-index: 1;
        visibility: hidden;
        background-image: linear-gradient(90deg, rgb(var(--c1)) 0%, rgb(var(--c2)) calc(100% / 3), rgb(var(--c1)) calc(200% / 3), rgb(var(--c2)) calc(300% / 3));
        background-size: 300% 100%;
        background-position: 0 0;
        transition: all 0.24s ease;
        -webkit-animation: loading 0.84s 0s linear infinite both normal;
        -moz-animation: loading 0.84s 0s linear infinite both normal;
        -o-animation: loading 0.84s 0s linear infinite both normal;
        -ms-animation: loading 0.84s 0s linear infinite both normal;
        animation: loading 0.84s 0s linear infinite both normal;
    }

    body.loading::after
    {
        height: 0.25rem;
        opacity: 1;
        visibility: visible;
    }

    @-webkit-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-moz-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-o-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-ms-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    */

    /* For 3 Color Web Schemes Only */

    body::after
    {
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        opacity: 0;
        height: 0px;
        transition: opacity 0.24s ease, height 0.24s ease;
    }

    body.loading::after
    {
        opacity: 1;
        height: 0.25rem;
        background-image: linear-gradient(90deg, rgb(var(--c2)) 0%, rgb(var(--c1)) calc(100% / 6), rgb(var(--c3)) calc(200% / 6), rgb(var(--c1)) calc(300% / 6), rgb(var(--c2)) calc(400% / 6), rgb(var(--c1)) calc(500% / 6), rgb(var(--c3)) 100%);
        background-size: 300% 100%;
        background-position: 0% 0%;
        -webkit-animation: glownimate 0.8s 0s linear infinite normal both;
        -moz-animation: glownimate 0.8s 0s linear infinite normal both;
        -o-animation: glownimate 0.8s 0s linear infinite normal both;
        -ms-animation: glownimate 0.8s 0s linear infinite normal both;
        animation: glownimate 0.8s 0s linear infinite normal both;
    }

    @-webkit-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-moz-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-o-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-ms-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    .btn_def
    {
        background-size: 100% 100%;
        background-position: 0% 0%;
    }

    .btn_def:hover
    {
        background-size: 200% 100%;
    }

    .btn_def:active
    {
        background-position: 100% 0%;
        -webkit-transform: scale(0.94);
        -moz-transform: scale(0.94);
        -o-transform: scale(0.94);
        -ms-transform: scale(0.94);
        transform: scale(0.94);
    }

    .btn_red
    {
        background-image: linear-gradient(120deg, rgb(250, 95, 95) 0%, rgb(190, 24, 24) 100%);
    }

    .flex-fb40p-1
    {
        flex-basis: calc(40% - 1rem);
    }

    .flex-fb50p-1
    {
        flex-basis: calc(50% - 1rem);
    }

    .flex-fb60p-1
    {
        flex-basis: calc(60% - 1rem);
    }

    .highlight
    {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .grad, .highlight
    {
        background-image: -webkit-linear-gradient(120deg, rgba(var(--c3), 1) 0%, rgba(var(--c1), 1) 50%, rgba(var(--c2), 1) 100%);
        background-image: -moz-linear-gradient(120deg, rgba(var(--c3), 1) 0%, rgba(var(--c1), 1) 50%, rgba(var(--c2), 1) 100%);
        background-image: -o-linear-gradient(120deg, rgba(var(--c3), 1) 0%, rgba(var(--c1), 1) 50%, rgba(var(--c2), 1) 100%);
        background-image: linear-gradient(120deg, rgba(var(--c3), 1) 0%, rgba(var(--c1), 1) 50%, rgba(var(--c2), 1) 100%);
    }

    /* SmartAlert */

    .smartAlert > div
    {
        -webkit-transform: scale(.8) translateY(2rem);
        -moz-transform: scale(.8) translateY(2rem);
        -o-transform: scale(.8) translateY(2rem);
        -ms-transform: scale(.8) translateY(2rem);
        transform: scale(.8) translateY(2rem);
        width: calc(24vw + 16rem);
        min-width: min(10rem,calc(100% - 2rem));
        max-width: calc(100% - 2rem);
        opacity: 0;
        visibility: hidden;
    }

    .smartAlert.show > div
    {
        -webkit-transform: scale(1) translateY(0);
        -moz-transform: scale(1) translateY(0);
        -o-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Site Styles Goes Here */

    nav a
    {
        display: inherit;
        padding-left: 1rem;
        padding-right: 1rem;
        line-height: inherit;
    }

    .widLogin
    {
        width: min(calc(14vw + 18rem), 100%);
    }

    .xlists > ul
    {
        flex-basis: 34%;
    }

    .xlists > div
    {
        flex-basis: calc(66% - 1rem);
    }

    .staffs
    {
        max-height: calc(20vmax + 8rem);
    }

    .menu:not(.show)
    {
        bottom: calc(100% + 2rem);
        opacity: 0;
        visibility: hidden;
    }

    .menu.show
    {
        bottom: calc(100% + 1rem);
        opacity: 1;
        visibility: visible;
    }
}