:root {
    /* Display Start*/
    --none: none;
    --hidden: hidden;
    --block: block;
    --iblock: inline-block;
    --flex: flex;
    /* NONE End */

    /* Justify-Content */
    --jcenter: center;
    --jfstart: flex-start;
    --jspbet: space-between;
    /* Justify-Content End */

    /* Flex-Direction Start */
    --fldirrow: row;
    --fldircol: column;
    /* Flex-Direction End */

    /* Align-Items Start */
    --alitcen: center;
    /* Align-Items End */

    /* Radius Collection Start */
    --radius: 4px;
    --radiush: 8px;
    --rad8644: 8px 6px 4px 4px;
    /* Radius Collection End */

    /* Background Colors Collection Start */
    --backwhite: rgba(255, 255, 255, 1);
    --backdarkgrey: rgba(26, 26, 26, 1);
    --backmetal: rgb(73, 73, 73);
    --backlgrey: rgba(255, 255, 255, .8);
    /* Background Colors Collection End */

    /* Button Colors Collection Start */
    --btnback1: rgba(30, 185, 30, 1);
    --btnback2: rgba(107, 96, 96);
    --btnfont1: rgba(255, 255, 255, 1);
    --btnfont2: rgba(177, 177, 177);
    --btnbackh1: rgba(30, 185, 30, .5);
    --btnbackh2: rgba(107, 96, 96, .3);
    --btnfonth1: rgba(255, 255, 255, .6);
    --btnfonth2: rgba(200, 200, 200);
    /* Button Colors Collection End */

    /* Transitions Collection Start */
    --btnchange: .3s ease-in-out;
    --inpchange: .5s ease-in-out;
    --btnscale: scale(1.02);
    --feedbox: opacity .4s ease;
    /* Transitions Collection End */

    /* Border Styling Start */
    --borderdark: .3vw solid rgba(68, 68, 68, 1);
    /* Border Styling End */

    /* Font Colors Start */
    --txtalertred: rgba(255, 0, 0, 1);
    --txth1blue: rgba(0, 64, 127, 1);
    --txtblack: rgba(0, 0, 0, 1);
    --txtwhite: rgba(255, 255, 255, 1);
    --txtloblue: rgba(15, 94, 172, 1);
    --lolabyel: rgba(240, 255, 205, 1);
    /* Font Colors End */

    /* Text Shadow Collection Start */
    --txtshadow1: 1px 1px 2px rgba(255, 255, 255, .5);
    /* Text Shadow Collection End */

    /* Login Inputs Start */
    --linback: rgba(230, 230, 230, 0.7);
    --linbackh: rgba(43, 43, 77, 0.5);
    /* Login Inputs End */

    /* Box Shadow Collection Start */
    --lboxsha: 0vw 0vh 1.2vw rgba(255, 255, 255, .5);
    --linpsha: 0 0 .2vw rgb(205, 205, 205);
    /* Box Shadow Collection End*/

    /* Padding Collection Start */
    --padd2vw3vh: 2vw 3vh;
    --padd1vd6vw: 1vh .6vw;
    --padd1: 1em;
    /* Padding Collection End */

    /* Margin Collection Start */
    --negMargin: -2vh;
    --1a1avh:  1vh auto 1vh auto;
    --mard7010vh: .7vh 0 1vh 0;
    --marb1em: 1em;
    /* Margin Collection End */

    /* Width Collection Start */
    --maxvw40: 40vw;
    --perc100: 100%;
    --perc97: 97%;
    --perc45: 45%;
    --wauto: auto;
    --w80vw: 80vw;
    /* Width Collection End */

    /* Height Collection Start */
    --minvh100: 100vh;
    --hauto: auto;
    --btnminh: 3em;
    /* Height Collection End */

    /* Font Size Collection Start */
    --fs01: .1em;
    --fs02: .2em;
    --fs03: .3em;
    --fs04: .4em;
    --fs05: .5em;
    --fs06: .6em;
    --fs07: .7em;
    --fs08: .8em;
    --fs09: .9em;
    --fs10: 1.0em;
    --fs11: 1.1em;
    --fs12: 1.2em;
    --fs13: 1.3em;
    --fs14: 1.4em;
    --fs15: 1.5em;
    --fs16: 1.6em;
    --fs17: 1.7em;
    --fs18: 1.8em;
    --fs19: 1.9em;
    --fs20: 2.0em;
    --fs21: 2.1em;
    --fs22: 2.2em;
    --fs23: 2.3em;
    --fs24: 2.4em;
    --fs25: 2.5em;
    --fs26: 2.6em;
    --fs27: 2.7em;
    --fs28: 2.8em;
    --fs29: 2.9em;
    --fs30: 3.0em;
    --fs31: 3.1em;
    --fs32: 3.2em;
    --fs33: 3.3em;
    --fs34: 3.4em;
    --fs35: 3.5em;
    --fs36: 3.6em;
    --fs37: 3.7em;
    --fs38: 3.8em;
    --fs39: 3.9em;
    --fs40: 4.0em;
    /* Font Size Collection End */
    
    /* Text-Aling Start */
    --txtaleft: left;
    --txtaright: right;
    --txtacenter: center;
    --txtajusty: justify;
    --txtaend: end;
    --txtastart: start;
    --txtainh: inherit;
    --txtaini: initial;
    --txtauns: unset;
    /* Text-Align End*/

    /* Font-Weight Start */
    --fw100: 100;
    --fw200: 200;
    --fw300: 300;
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;
    --fw700: 700;
    --fw800: 800;
    --fw900: 900;
    --fwbold: bold;
    --fwbolder: bolder;
    --fwlight: lighter;
    --fwnorm: normal;
    --fwinh: inherit;
    --fwini: initial;
    --fwuns: unset;
    /* Font-Weight End */

    /* Opacity Start */
    --opanone: 0;
    --opadot1: .1;
    --opadot2: .2;
    --opadot3: .3;
    --opadot4: .4;
    --opadot5: .5;
    --opadot6: .6;
    --opadot7: .7;
    --opadot8: .8;
    --opadot9: .9;
    --opa1: 1;
    /* Opacity End */
}

body {
    display: var(--flex);
    justify-content: var(--jfstart);
    align-items: var(--alitcen);
    flex-direction: var(--fldircol);
    min-height: var(--minvh100);
    background-color: var(--backdarkgrey);
    box-sizing: border-box;
    font-family: 'Segoe UI', "Roboto", "Open Sans", Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--fs12);
}

h1 {
    display: var(--block);
    font-size: var(--fs22);
    color: var(--txth1blue);
    text-shadow: var(--txtshadow1);
}

h3 {
    font-size: var(--fs07);
    color: var(--lolabyel);
    margin-bottom: var(--marb1em);
    margin-top: var(--negMargin);
}

#login-box {
    max-width: var(--maxvw40);
    background-color: var(--backmetal);
    border: var(--borderdark);
    border-radius: var(--rad8644);
    padding: var(--padd2vw3vh);
    box-shadow: var(--lboxsha);
}

.head {
    display: var(--flex);
    justify-content: var(--jfstart);
    align-items: var(--alitcen);
    flex-direction: var(--fldircol);
}

div.headelement > h1.subheadelement {
    font-size: var(--fs18);
    color: var(--txtloblue);
    text-shadow: var(--none);
    margin-top: var(--negMargin);
}

label {
    width: var(--perc100);
    color: var(--lolabyel);
}

input {
    width: var(--perc97);
}

#usr_name, #usr_pass, #usr_email, #usr_repeat_pass, #usr_2fa {
    color: var(--txtblack);
    background-color: var(--linback);
    box-shadow: var(--linpsha);
    padding: var(--padd1vd6vw);
    margin: var(--mard7010vh);
    transition: var(--btnchange);
}
#usr_name:hover, #usr_pass:hover, #usr_email:hover, #usr_repeat_pass:hover, #usr_2fa:hover {
    color: var(--txtwhite);
    background-color: var(--linbackh);
    border-radius: var(--radiush);
    transition: var(--btnchange);
    transform: var(--btnscale);
}

.btn-row {
    width: var(--perc97);
    display: var(--flex);
    justify-content: var(--jspbet);
}

.btn-row button {
    margin: var(--1a1avh);
    width: var(--perc45);
    border-radius: var(--radius);
    transition: var(--btnchange);
    min-height: var(--btnminh);
}

.btn-row button:hover {
    border-radius: var(--radiush);
    transform: var(--btnscale);
    transition: var(--btnchange);
}

.btn-row button[type="submit"] {
    background-color: var(--btnback1);
    color: var(--btnfont1);
}

.btn-row button[type="submit"]:hover {
    background-color: var(--btnbackh1);
    color: var(--btnfonth1);
}

.btn-row button[type="button"] {
    background-color: var(--btnback2);
    color: var(--btnfont2);
}

.btn-row button[type="button"]:hover {
    background-color: var(--btnbackh2);
    color: var(--btnfonth2);
}

.feedback {
    display: var(--hidden);
    opacity: var(--opanone);
    transition: var(--feedbox);
    border-radius: var(--radius);
    padding: var(--padd1);
    text-align: var(--txtacenter);
    font-weight: var(--fwbold);
}

.feedback.visible {
    display: var(--block);
    opacity: var(--opa1);
}

.feedback.success {
    background-color: var(--bg-success);
    color: var(--txt-success);
}

.feedback.error {
    background-color: var(--bg-error);
    color: var(--txt-error);
}

.feedback.info {
    background-color: var(--bg-info);
    color: var(--txt-info);
}

.info2fa {
    display: var(--flex);
    justify-content: var(--jcenter);
    align-items: var(--alitcen);
    flex-direction: var(--fldircol);
    font-size: var(--fs12);
    width: var(--perc97);
    height: var(--hauto);
    margin-bottom: var(--marb1em);
    padding: var(--padd1vd6vw);
    color: var(--backlgrey);
}

.head2fa {
    margin-bottom: var(--marb1em);
    font-weight: var(--fwbolder);
}

.message2fa {
    margin-bottom: var(--marb1em);
    font-size: var(--fs10);
}

.dashboard {
    width: var(--w80vw);
    background-color: var(--backlgrey);
    padding: var(--padd1);
}