@charset "UTF-8";

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

@font-face
{
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

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

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

:root
{
    --c1: 0 173 239;
    --c2: 34 64 154;
    --c3: 11 106 154;
    --c12: 0 0 0;
    --c13: 255 255 255;
    --c14: 248 248 248;
    --f1: 'Open Sans', sans-serif;
    --f2: 'Lora', cursive;
    --gradAngle: 90deg;
}

/* Theme Specific Settings */

@media only screen and (prefers-color-scheme: dark)
{
    :root
    {
        --c4: 36 40 44;
        --c5: 50 58 64;
        --c6: 20 24 28;
        --c7: 242 242 244;
        --c8: 228 230 234;
        --c9: 252 252 255;
        --c10: 255 255 255;
        --c11: 0 0 0;
    }

    .slide::before, .slide::after
    {
        -webkit-filter: invert(1);
        filter: invert(1);
        opacity: 0.14;
    }

    .neumorphic_div
    {
        -webkit-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c11) / 0.06), -1rem -1rem 2rem 0rem rgb(var(--c10) / 0.24);
        -moz-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c11) / 0.06), -1rem -1rem 2rem 0rem rgb(var(--c10) / 0.24);
        -o-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c11) / 0.06), -1rem -1rem 2rem 0rem rgb(var(--c10) / 0.24);
        -ms-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c11) / 0.06), -1rem -1rem 2rem 0rem rgb(var(--c10) / 0.24);
        box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c11) / 0.06), -1rem -1rem 2rem 0rem rgb(var(--c10) / 0.24);
    }

    .neumorphic_in
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
    }

    .neumorphic_btn, .neumorphic_out
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068);
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068);
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068);
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068);
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068);
    }
    
    .neumorphic_btn:active
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11), 0.4) / -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c10) / 0.068) inset;
    }
}

@media only screen and not (prefers-color-scheme: dark)
{
    :root
    {
        --c4: 226 228 234;
        --c5: 228 230 234;
        --c6: 252 252 255;
        --c7: 36 40 44;
        --c8: 50 58 64;
        --c9: 20 24 28;
        --c10: 0 0 0;
        --c11: 255 255 255;
    }

    .slide::before, .slide::after
    {
        -webkit-filter: invert(0);
        filter: invert(0);
        opacity: 0.1;
    }

    .neumorphic_div
    {
        -webkit-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c10) / 0.068), -1rem -1rem 2rem 0rem rgb(var(--c11) / 0.8);
        -moz-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c10), 0.068), -1rem -1rem 2rem 0rem rgb(var(--c11) / 0.8);
        -o-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c10), 0.068), -1rem -1rem 2rem 0rem rgb(var(--c11) / 0.8);
        -ms-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c10), 0.068), -1rem -1rem 2rem 0rem rgb(var(--c11) / 0.8);
        box-shadow: 1rem 1rem 2rem 0rem rgb(var(--c10), 0.068), -1rem -1rem 2rem 0rem rgb(var(--c11) / 0.8);
    }

    .neumorphic_in
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
    }

    .neumorphic_btn, .neumorphic_out
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4);
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4);
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4);
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4);
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4);
    }
    
    .neumorphic_btn:active
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--c10) / 0.08) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--c11) / 0.4) inset;
    }
}

@supports (backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))
{
    .glass
    {
        background-image: linear-gradient(140deg, rgb(var(--c11) / 0.24) 0%, rgb(var(--c11) / 0.4) 40%, rgb(var(--c11) / 0.24) 60%, rgb(var(--c11) / 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, rgb(var(--c11) / 0.4) 0%, rgb(var(--c11) / 0.64) 40%, rgb(var(--c11) / 0.4) 60%, rgb(var(--c11) / 0.24) 100%);
    }
}

html
{
    font-size: 100%;
    scrollbar-width: thin;
}

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

body
{
    background-color: rgb(var(--c4));
    color: rgb(var(--c12));
}

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

@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: 200;
        -webkit-filter: blur(0.0625rem);
        filter: blur(0.0625rem);
        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%;}
    }
    
    */

    .smartAlert
    {
        color: rgb(var(--c7));
    }

    .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, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: -moz-linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: -o-linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
    }

    nav a
    {
        display: inherit;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        line-height: inherit;
        transition: all 0.24s ease;
    }

    input[type="checkbox"]:not(:checked) ~ i.checked, input[type="checkbox"]:checked ~ i.unchecked
    {
        opacity: 0;
        visibility: hidden;
    }

    input[type="checkbox"]:checked ~ i.checked, input[type="checkbox"]:not(:checked) ~ i.unchecked
    {
        opacity: 1;
        visibility: visible;
    }

    nav a, header button i
    {
        line-height: 5rem;
    }

    /* Slideshow */
    
    .slider
    {
        overflow: hidden;
    }

    .slider-stage > *
    {
        z-index: 0;
    }

    .slider-stage > .slide-appearing
    {
        z-index: 1;
    }

    .slider-stage > .slide-active
    {
        z-index: 2;
    }

    .slider-nav
    {
        position: absolute;
        bottom: 1rem;
        right: 5vw;
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
        -webkit-border-radius: 2rem;
        -moz-border-radius: 2rem;
        -o-border-radius: 2rem;
        -ms-border-radius: 2rem;
        border-radius: 2rem;
    }

    .slide-animatein
    {
        animation-fill-mode: both;
        animation: slideanimin 1s ease 0s forwards 1;
    }

    .slide-animateout
    {
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -moz-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -o-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -ms-animation: slideanimout 0.8s 0.2s ease forwards 1;
        animation: slideanimout 0.8s 0.2s ease forwards 1;
    }

    @keyframes slideanimin
    {
        0% { filter: blur(1rem); }
        100% { filter: none; }
    }

    @keyframes slideanimout
    {
        0%{opacity: 1; filter: none;}
        100%{opacity: 0; filter: blur(1rem);}
    }
    
    .betl::before, .aftl::after, .betlw::before, .aftlw::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
    }

    .betl::before, .aftl::after
    {
        width: 100%;
        height: 100%;
    }

    .betlw::before, .aftlw::after
    {
        width: 100%;
    }

    .bgcovcent
    {
        background-size: cover;
        background-position: center;
    }

    /* Site Styles Goes Here */
    
    header
    {
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
    }

    .slide figure, .slide figure img
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .slide figure img
    {
        object-fit: cover;
        object-position: center;
    }

    .abt
    {
        background-image: url('/imx/s4.webp');
    }

    .stycen::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6vmax;
        background-color: rgb(var(--c1));
        -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 1vmax, 60% 2vmax, 50% 6vmax, 40% 2vmax, 0px 1vmax);
        clip-path: polygon(0px 0px, 100% 0px, 100% 1vmax, 60% 2vmax, 50% 6vmax, 40% 2vmax, 0px 1vmax);
    }

    .stycen::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5vmax;
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
        -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 1vmax, 60% 2vmax, 50% 5vmax, 40% 2vmax, 0px 1vmax);
        clip-path: polygon(0px 0px, 100% 0px, 100% 1vmax, 60% 2vmax, 50% 5vmax, 40% 2vmax, 0px 1vmax);
    }

    .svc
    {
        background-image: url('/imx/s3.webp');
    }
    
    .styritbot::before
    {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
        clip-path: polygon(100% 100%, 100% 0%, 40% 100%);
    }
    
    .osc > div
    {
        border-radius: 0.25rem 0.25rem 2.5rem 0.25rem;
    }
    
    .osc a
    {
        border-radius: 2.5rem 0rem 2.5rem 0.25rem;
    }
    
    .osc figure
    {
        place-items: center;
    }
    
    .osc svg
    {
        animation: rotor 4.8s linear 0s infinite;
    }
    
    .osc svg circle
    {
        stroke: rgb(var(--c12) / 0.18);
        stroke-width: 0.125rem;
        stroke-dasharray: 5rem;
        stroke-dashoffset: 5rem;
        animation: stedar 4.8s ease 0s infinite, stedof 6.8s ease 0s infinite;
    }
    
    @keyframes stedar
    {
        0%, 100% { stroke-dasharray: 4rem; }
        50% { stroke-dasharray: 8rem; }
    }
    
    @keyframes stedof
    {
        0%, 100% { stroke-dashoffset: 2rem; }
        50% { stroke-dashoffset: 8rem; }
    }
    
    @keyframes rotor
    {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .styrit::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle at 50% 50%, rgb(var(--c14)) 0%, rgb(var(--c14)) 20%, transparent 20%, transparent 100%);
        background-size: 1rem 1rem;
        background-position: center;
        background-repeat: repeat;
    }

    .styrit::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
        -webkit-mask-image: radial-gradient(circle at 50% 50%, rgb(var(--c14)) 0%, rgb(var(--c14)) 20%, transparent 20%, transparent 100%);
        -webkit-mask-size: 1rem 1rem;
        -webkit-mask-position: center;
        -webkit-mask-repeat: repeat;
        mask-image: radial-gradient(circle at 50% 50%, rgb(var(--c14)) 0%, rgb(var(--c14)) 20%, transparent 20%, transparent 100%);
        mask-size: 1rem 1rem;
        mask-position: center;
        mask-repeat: repeat;
        opacity: 0.2;
        animation: getaway 4.2s ease 0s infinite;
    }

    @keyframes getaway
    {
        0% { clip-path: polygon(0% -40%, 100% -40%, 100% 0%, 0% 0%); }
        68%, 100% { clip-path: polygon(0% 100%, 100% 100%, 100% 110%, 0% 110%); }
    }

    .adms > div::before
    {
        content: "";
        position: absolute;
        top: -0.5rem;
        left: -0.5rem;
        width: 60%;
        height: 60%;
        border-radius: 0.75rem;
        background-image: linear-gradient(60deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
    }

    .adms > div img
    {
        border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
    }

    .eula
    {
        background-image: url('/imx/s0.webp');
    }

    .ersec
    {
        background-image: url('/imx/s2.webp');
    }
}

@media only screen and (min-width: 760px)
{
    .mobonly
    {
        display: none;
    }
    
    header
    {
        align-items: start;
    }

    .logo img
    {
        height: 3.4rem;
    }
}

@media only screen and (max-width: 759px)
{
    header
    {
        align-items: center;
    }
    
    .logo img
    {
        height: 2rem;
    }
    
    .navcon
    {
        position: absolute;
        top: 100%;
        left: 0px;
        width: 100%;
    }

    .navbtn.expanded rect:nth-of-type(1)
    {
        top: -20%;
        left: 20%;
        fill: rgb(var(--c1));
        transform-origin: 90% 20%;
        transform: rotate(-45deg) scaleX(40%);
    }

    .navbtn.expanded rect:nth-of-type(2)
    {
        fill: rgb(var(--c13));
        transform-origin: 50% 50%;
        transform: rotate(45deg);
    }

    .navbtn.expanded rect:nth-of-type(3)
    {
        left: -20%;
        top: 20%;
        fill: rgb(var(--c1));
        transform-origin: 10% 80%;
        transform: rotate(-45deg) scaleX(40%);
    }
    
    nav.flex
    {
        position: absolute;
        right: 0px;
        top: 0px;
        display: block;
    }
    
    .searchform.show
    {
        -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
        clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
    }
    
    .searchform input
    {
        flex-grow: 1;
    }

    nav
    {
        position: absolute;
        right: 0px;
        top: 100%;
        text-align: right;
        background-color: rgb(var(--c3) / 0.88);
        opacity: 0;
        visibility: hidden;
        -webkit-border-radius: 0px 0px 0px 1rem;
        -moz-border-radius: 0px 0px 0px 1rem;
        -o-border-radius: 0px 0px 0px 1rem;
        -ms-border-radius: 0px 0px 0px 1rem;
        border-radius: 0px 0px 0px 1rem;
        -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 0%, 0px 0px);
        clip-path: polygon(0px 0px, 100% 0%, 100% 0%, 0px 0px);
        -webkit-transition: all 0.24s ease;
        -moz-transition: all 0.24s ease;
        -o-transition: all 0.24s ease;
        -ms-transition: all 0.24s ease;
        transition: all 0.24s ease;
    }
    
    nav.show
    {
        opacity: 1;
        visibility: visible;
        -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0px 100%);
        clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0px 100%);
    }

    .dynamicnav
    {
        flex-direction: column;
    }

    #sitenav li, #usernav li
    {
        display: list-item;
        width: 100%;
    }

    nav a, nav li > ul > li > a, nav li:hover > ul > li > a
    {
        line-height: 2.5rem;
    }
}