:root{
    --3ms:167ms;
    --active:rgba(255, 229, 36, 0.999);
    --b:44px;
    --bkgd:#002E63;
    --fgnd:#0b63c8;
    --bkgd1:#111;
    --bkgd2:#242424;
    --bkgd6:#A9A9A9;
    --bkgd8:#CCC;
    --bldr:rgb(27, 125, 254);
    --color:#DEDEDE;
    --create:rgb(68,68,255);
    --dark:#111;
    --dark0:#1A1A1A;
    --dark1:#222;
    --dark2:#333;
    --dark3:#444;
    --dark4:#555;
    --dark5:#666;
    --dark6:#777;
    --fail:rgb(255, 0, 0);
    --fail1:rgb(132, 27, 27);
    --fren:rgb(31,109,252);
    --fren1:rgb(21, 64, 144);
    --last:#444;
    --logout:#ff0000;
    --mdlr:rgb(27, 254, 80);
    --ms:111ms;
    --pass:rgb(255, 0, 0);
    --submit:rgb(20, 169, 97);
    --theme:#fde400;
}
@keyframes bounce {
  0% {bottom:0px;}
  50% {bottom:10px;}
  100% {bottom:0px;}
}
@keyframes spin{0%{rotate:0deg;}100%{rotate:359deg;}}
*{
    box-sizing:border-box;
    &[hide]{display:none;opacity:0;pointer-events:none;visibility:hidden;}
}
html{
    background:transparent;
}
html,body{
    color:var(--color);
    font-family:'Arial';
    font-size:12pt;
    font-size:1em;
    height:100vh;
    height:100dvh;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:none;
    position:fixed;
    width:100vw;
    width:100dvw;
}
body{
    background:var(--bkgd);

}
button,input,textarea{
    background:transparent;
    border:0;
    color:var(--color);
    cursor:pointer;
    font-family:'Arial';
    line-height:24px;
    min-height:24px;
    outline:0;
}
button{
    min-height:1em;
    padding:4px 8px;
    >*{pointer-events:none;}
    &[reload]{
        background:transparent;
        height:max-content;
        line-height:30px;
        padding:0;
        width:max-content;
        >svg{
            fill:var(--color);
            height:30px;
            width:30px;
        }
    }
}
content{
    align-items: center;
    display:flex;
    flex-direction:column;
    font-size:14px;
    margin-bottom:100px;
    div{
        &[bar]{
            align-items:center;
            display:flex;
            flex-direction:column;
            justify-content:center;
            margin-top:100px;
            text-align:center;
        }
        &[blurb]{
            line-height:20px;
            margin:1vh;
            max-width:400px;
            min-width:250px;
            text-align:justify;
            width:80vw;
            > b{
                color:var(--theme);
            }
        }
        &[contact]{
            max-width:400px;
            min-width:250px;
            width:80vw;
            div[thanks]{
                border:1px solid var(--color);
                margin:100px 0;
                padding:20px;
                text-align:center;
            }
            form{
                width: 100%;
                display: flex;
                flex-direction: column;
                font-size:14px;
                gap:8px;
                margin:20px 0;
                button{
                    background:var(--submit);
                    height:var(--b);
                    width:100%;
                }
                input,textarea{
                    background:var(--color);
                    color:var(--dark);
                    max-width:400px;
                    min-height:30px;
                    min-width:250px;
                    padding:4px 8px;
                    width:80vw;
                }
                textarea{
                    min-height:225px;
                }
            }
        }
        &[load]{
            display:flex;
            flex-direction:row;
            gap:2px;
            padding:4px 8px;
            pointer-events:none;
            position:relative;
            scale:1.25;
            user-select:none;
            width:max-content;
            b{
                animation:bounce 1.2s ease infinite;
                position:relative;
                &:nth-child(1){animation-delay:0;}
                &:nth-child(2){animation-delay:calc(var(--ms) * 2);}
                &:nth-child(3){animation-delay:calc(var(--ms) * 3);}
                &:nth-child(4){animation-delay:calc(var(--ms) * 4);}
            }
        }
        &[top]{
            align-items:center;
            display:flex;
            flex-direction:row;
            gap:10px;
            height:50px;
            justify-content:center;
            margin:20px 0;
            width:max-content;
            >icon{
                height:30px;
                width:30px;
                svg{fill:var(--color);}
                &:first-child{margin-top:2px;}
            }
        }
        &[vid]{
            margin:5vh;
            details{
                margin-bottom:2.5vh;
                max-width:400px;
                min-width:250px;
                text-align:left;
                width:80vw;

                div[desc]{
                    margin:20px 0;
                }
                summary{
                    span{
                        padding-left:10px;
                    }
                }
                video{
                    max-width:400px;
                    min-width:250px;
                    width:80vw;
                }
            }
        }
    }
}

input,textarea{
    background:var(--dark1);
    border:1px solid transparent;
    &[err]{border:1px solid var(--fail);}
}