:root{
    --bg: #fff;
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
    --border: #d8dae1;
    --accent: #0d47a1;
    --accent-light: #90caf9;
    --code: #d81b60;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

html{
    background-color: #212121;
    color: #ffffff;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;

}


.taf-link{
    color: var(--accent-light);
    background-color: #0d47a1;
}

.title {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    opacity: 0%;
    animation-name: title_dropdown;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes title_dropdown {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}


.banner{
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    color: #212121;
    animation-name: banner_anim;
    animation-duration: 2s;
    animation-delay: 2.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes banner_anim {
    0%{color: #212121;}
    100%{color: #ffffff;}
}

.login_button{
    display: flex;
    justify-content: center;
    align-items: center;
}


.hidden{
    opacity: 0;
    visibility: hidden;
}


.teams-boxes{
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    animation-name: teams-boxes-quote-anim;
    animation-duration: 2s;
    animation-delay: 4.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0%;
    color: rgb(255, 79, 79);
    transform: scale(0);

}


.teams-boxes-quote{
    animation-name: teams-boxes-quote-anim;
    animation-duration: 2s;
    animation-delay: 4.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0%;
    color: rgb(255, 79, 79);
    transform: scale(0);
}


@keyframes teams-boxes-quote-anim{
    0% {opacity: 0%; color: rgb(255, 79, 79); transform: scale(0);}
    100%{opacity: 100%; color: #ffffff; transform: scale(1);}

}



/* Login page section*/
.login_title{
    font-family: "Ubuntu";
}


.submit{
    font-family: var(--sans-font);
    background-color: var(--marked);
    transform: scale(1.2);
    margin-left: 10px;
    border: 3px solid #d6b300;
    border-radius: 40px;
    padding: 2px;
    width: 70px;
    height:40px;
}


.submit:hover{
    animation-name: submit_hover_anim;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-duration: 0.25s;
}


.submit:not(:hover){
    animation-name: submit_hover_anim_reverse;
    animation-duration: 0.1s;
}


.password_box{
    transform: scale(1.1);
    background-color: var(--preformatted);
    margin-right: 20px;
    margin-left: 20px;
    border: 4px solid var(--text-light);
    border-radius: 10px;
}


.password_box:focus{
    animation-name: password_box_focus_anim;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}


@keyframes password_box_focus_anim{
    0% {transform: scale(1.1);}
    50% {transform: scale(1.25);}
    100% {transform: scale(1.19);}
}


@keyframes submit_hover_anim{
    0% {transform: scale(1.2); border: 3px solid #d6b300}
    100% {transform: scale(1.3); border: 5px solid #fdffca} 
}


@keyframes submit_hover_anim_reverse{
    0% {transform: scale(1.3); border: 5px solid var #fdffca} 
    100% {transform: scale(1.2); border: 3px solid #d6b300}
}