:root{
    --topbarWidth:80px;
    --col_normalTXT:#ecf0f1;
    --col_bold_TXT:#bdc3c7; 
    --col_highlight_TXT:#f39c12;
    --col_btn:#009cda; 
    --col_success:#00d573; 
    --col_error:#ff2225; 
    --col_dark:#1b1b1b; 
    --col_dark_light:#212122; 
    --col_accent_1:#c6bdff;
    --col_accent_1_dm:#6a5276; 
    --col_accent_2:#f2c2ff;
    --col_accent_2_dm:#705e76; 
    --col_accent_3:#e2a3ff; 
    --col_accent_3_dm:#5f5c76;
    --col_accent_4:#d5cffe; 
    --col_accent_4_dm:#656376; 

    --CornerRad:4px; 
    --ElementPadding:8;   
    --ElementPadding_Cozy:16; 
    --ElementPadding_Cozier:46;

}

body{
    background-color:var(--col_dark_light);
}
/*Generic UI elements*/
.black_to_col_accent_3{
    filter: invert(39%) sepia(12%) saturate(734%) hue-rotate(207deg) brightness(91%) contrast(94%);
}
.topbar{
    background-color:var(--col_dark);
}
.backdrop{
    background-color:var(--col_dark);
    opacity:80%;
}
#ui_element_top_right{
    position:absolute;
    top:var(--ElementPadding_Cozy);
    right:var(--ElementPadding_Cozy);
}
.ui_action_element{
    z-index: 999;
}
.AddContainer{
    font-family:main_font;
}

@font-face {
    font-family: main_font;
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
}
.text{
    font-family:main_font; 
    color:var(--col_normalTXT);
    font-size:large;
}


/*Generic UI elements*/


/*bar animation*/
@keyframes BarMove{
    0%{
        right:-400px;
    }
    10%{
        right:0px;
    }
    /*Do nothing after this*/
    90%{
        right:0px;
    }
    100%{
        right:-400px; 
    }
}

select {
    background-color: var(--col_bg_lighter);
    color: var(--col_normalTXT);
    border: 1px solid var(--col_link_TXT);
    border-radius: var(--CornerRad);
    padding: var(--ElementPadding);
    transition: border-color 0.3s ease;
    font-family:main_font; 
}

textarea {
    background-color: var(--col_bg_lighter);
    color: var(--col_normalTXT);
    border: 1px solid var(--col_link_TXT);
    border-radius: var(--CornerRad);
    padding: var(--ElementPadding);
    transition: border-color 0.3s ease;
    font-family:main_font; 
}






#centerbox {
    position:absolute;
    top:0px;
    left:50%; 
    width:80ch;
    height:100%;
    background-color:var(--col_dark); 
    transform:translate(-50%, 0); 

    
}

#textspacing{
    position:absolute;
    top:var(--ElementPadding_Cozy);
    left:var(--ElementPadding_Cozy);
    width:100%;
    height:100%;

}
#bk{
    width:8em; 
}

#email{
    color:var(--col_accent_1)
}

#large{
    font-size:x-large;
}
.link{
    color:var(--col_accent_3); 
    cursor:pointer; 
    
}
.link:hover{
    color:var(--col_btn); 
}