/* @font-face {
    font-family: 'TT Mussels Black'; src: url('../fonts/TT-MUSSELS-BLACK.TTF');
} */

@font-face {
    font-family: 'Questrial'; src: url('../fonts/QUESTRIAL-REGULAR.TTF');
}       
    
@font-face {
    font-family: 'Inconsolata'; src: url('../fonts/INCONSOLATA.REGULAR.TTF');
}

@font-face {
    font-family: 'Inter'; src: url('../fonts/INTER.REGULAR.TTF');
}

body {
    margin: 0;
}

:root {
    --dark-background: #0C0C24;
    --medium-background: #1F1F3F;
    --ligth-background: #2E2E49;

    --blue-button-background: #3535BF;

    --hover-background: #undefined;

    --bolder-font-family: 'Inter';

    --medium-border: 1px solid #2E2E49;
    --ligth-border: 1px solid #45456A;
    --white-border: 1px solid white;

    --shadow-button: 4px 4px 4px 0px rgba(0, 0, 0, 0.35);

    --alert-error: #A91414;

    --cinza-so: #A6A6A6;

    --padding-input: 3px;
    --radius-input: 4px;

    --padding-button: 3px 6px;

    --title-size: 3em;
    --normal-size: 1em;
    --input-size: 1em;
    --label-size: 1.1em;
    --button-size: 1.2em;

    --min-title-size: 40px;
    --min-normal-size: 12px;
    --min-input-size: 12px;
    --min-label-size: 14px;
    --min-button-size: 16px;
}

#codesoBots {
    color: white;
    font-family: var(--bolder-font-family);
    font-size: var(--title-size);
    text-align: center;
    margin-top: 10vh;
    margin-bottom: 0
}

#codesoBots > span {
    color: var(--cinza-so);
}

#footerCodeso {
    font-family: var(--bolder-font-family);
    font-size: var(--title-size);
    position: fixed;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
}

#footerCodeso > a { color: white; }

#tab {
    display: flex;
    align-items: center;
    justify-content: space-around;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100vw;
    height: 10vh;

    margin: 0;
    padding: 0;

    border-bottom: var(--white-border);
    background-color: var(--dark-background);
}

#tab > a {
    display: flex;
    align-items: flex-end;
    padding: 6px 0;
}

#tab > a > img {
    margin: 0 6px 0 0;
}

@media only screen and (max-width: 720px) {
    #codesoBots { font-size: var(--min-title-size); }
    #footerCodeso { font-size: var(--min-title-size); }

    #tab {
        top: unset;
        bottom: 0;
        
        height: 8vh;

        border-bottom: 0;
        border-top: var(--white-border);
        background-color: var(--dark-background)
    }

    #tab > a > img { width: 26px; margin: 0 }
    #tab > a > p { display: none; }
}