@font-face{
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat-Regular.ttf);
}
*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat';
    font-size: 16px;
}
html{
    max-width: 1920px;
    background: var(--main--dark);
    margin: 15px;
}
body{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    border-radius: 15px 15px 0 0;
    background: var(--main--lighter);
}
.round-btn{
    border-radius: 11px;
}
.general--icon{
    width: 30px;
}
.general--icon:hover{
    cursor: pointer;
}
:root{
    /* GENERAL */
    --main--darkest: #282827;
    --main--darker: #585757;
    --main--dark: #767575;
    --main--mid: #a09e9b;
    --main--light: #d4d4d4;
    --main--lighter: #e7e7e7;
    --main--lightest: #f6f6f6;

    --brown--darkest: #6b5242;
    --brown--darker: #8c705d;
    --brown--dark: #a48773;
    --brown--mid: #bda18e;
    --brown--light: #bda18e;
    --brown--lighter: #e5d5c9;
    --brown--lightest: #f6eae1;

    --blue--darker: #0B204D;
    --blue--dark: #314F90;
    --blue--mid: #435E98;
    --blue--light: #6079AE;
    

    --white--light: #F5F5F5;
    --white--yellow: #F9F6EF;

    --general--bg-dark: #11191d;
    --general--bg-mid: #1e272c;
    --general--bg-light: #253238;
    --general--font: #353535;
    --general--input-bg: #00000027;
    --general--input-bg_focus: #00000044;
    --general--green: #44824C;
    --general--green_hover: #20682A;
    --general--yellow: #9c9161;
    --general--yellow_hover: #8c7e3f;
    --general--red: #9a463f;
    --general--red_hover: #8a362f;
    --general--blue: #31a9f4;
    --general--blue_hover: #217bb3;
    /* NAVBAR */
    --navbar--bg: #2c303b;
}
.general--yellow{background-color: var(--general--yellow);}
.general--red{background-color: var(--general--red);}
.general--green{background-color: var(--general--green);}
.general--blue{background-color: var(--general--blue);}
.general--dark{background-color: var(--general--dark);}

.general--yellow:hover{background-color: var(--general--yellow_hover);}
.general--red:hover{background-color: var(--general--red_hover);}
.general--green:hover{background-color: var(--general--green_hover);}
.general--blue:hover{background-color: var(--general--blue_hover);}
.general--dark:hover{background-color: var(--general--dark_hover);}

@media screen and (min-width: 1920px){
    html{
        margin: 15px auto;
    }
}
@media screen and (max-width: 600px) {
    html{
        margin: 0;
    }
    body{
        border-radius: 0;
    }
}