@charset "UTF-8";

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

@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-display: swap;
}

@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-display: swap;
}

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

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

:root
{
    --c1: 198 57 169;
    --c2: 105 0 225;
    --f1: 'Georama', sans-serif;
    --f2: 'Comfortaa', cursive;
    --f3: 'Roboto Mono', monospace;
    --gradAngle: 90deg;
}

/* Theme Specific Settings */

@media only screen
{
    :root
    {
        --c4: 36 40 44;
        --c5: 50 58 64;
        --c6: 20 24 28;
        --c7: 210 210 210;
        --c8: 164 164 164;
    }

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

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

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

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

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

::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, 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%);
    }

    /* Site Styles Goes Here */

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

    .widLogin, .logout
    {
        width: min(calc(12vw + 20rem), 100%);
    }
    
    .authGrid
    {
        grid-template-areas: "centrum";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-width: min();
        width: calc(16rem + 10vw);
    }
    
    .authGrid > div
    {
        grid-area: centrum;
    }

    .hidden
    {
        -webkit-transform: translateX(1rem);
        -moz-transform: translateX(1rem);
        -o-transform: translateX(1rem);
        -ms-transform: translateX(1rem);
        transform: translateX(1rem);
    }

    .hidden.show
    {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    #gRecon
    {
        display: none;
    }

    .passgrid
    {
        grid-template-columns: 3fr 5fr 2fr 2fr 8rem;
    }

    .p
    {
        line-height: 1.4em;
    }

    .flex-fb100p > *
    {
        flex-basis: 100%;
    }

    .halfdivs > *
    {
        width: calc(50% - 0.5rem);
    }

    .blue-highlight
    {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: -webkit-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: -moz-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: -o-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
    }

    .passboard form
    {
        width: calc(10rem + 20vw);
        margin-left: auto;
        margin-right: auto;
    }
    
    .passgridmain:empty
    {
        display: block;
        padding: 1rem;
        text-align: center;
        font-weight: 500;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        -o-border-radius: 0.5rem;
        -ms-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .passgridmain:empty::before
    {
        content: "There are no contents to display";
    }

    .passgridmain ul:nth-child(odd)
    {
        border-left: 0.25rem solid rgb(var(--c1));
    }

    .passgridmain ul:nth-child(even)
    {
        border-left: 0.25rem solid rgb(var(--c2));
    }
}

@media only screen and (max-width: 1000px)
{
    .passboard
    {
        margin-bottom: 2rem;
    }

    .passgridhead
    {
        display: none;
    }
    
    .passgridmain
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
        gap: 0.5rem;
    }
    
    .passgridmain ul
    {
        display: block;
    }
    
    .passgridmain ul li:last-child
    {
        background-color: rgb(var(--c4) / 0.4);
    }
    
    .passgridmain button
    {
        line-height: 2.5rem;
    }
    
    .passgridmain li
    {
        text-align: left;
    }

    .passgridmain ul li:not(:last-child)::before
    {
        font-weight: 600;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: -webkit-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: -moz-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: -o-linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
        background-image: linear-gradient(120deg, #00d9ff 0%, #00b3ff 100%);
    }
    
    .passgridmain ul li:first-child::before
    {
        content: "Heading: ";
    }
    
    .passgridmain ul li:nth-child(2)::before
    {
        content: "Description: ";
    }

    .passgridmain ul li:nth-child(3)::before
    {
        content: "Username: ";
    }

    .passgridmain ul li:nth-child(4)::before
    {
        content: "Password: ";
    }
}