@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "Montserrat";
    src: url("../static/fonts/Montserrat-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}

:root {
    --main-color: black;
    --main70-color: rgba(0, 0, 0, 0.7);
    --main31-color: rgba(0, 0, 0, 0.31);
    --main0-color: rgba(0, 0, 0, 0);
    --second-color: white;
    --second90-color: rgba(255, 255, 255, 0.9);
    --second70-color: rgba(255, 255, 255, 0.7);
    --second0-color: rgba(255, 255, 255, 0);
    --third-color: #19191B;
    --alert-color: #FF0C00;
    --alertFont-color: #EB0700;
    --danger-color: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(221, 46, 41, 0.3) 41%, rgba(221, 46, 41, 0.3) 55%, rgba(0, 0, 0, 0) 100%);
    --orange-color: #D96221;
    --orange2-color: #FF5A00;
    --light-orange-color: #FFB288;
    --yellow-color: #FFC500;
    --yellow20-color: #FFC50051;
    --yellow12-color: #FFC50030;
    --banana-color: #FEDC5A;
    --banana10-color: #FEDC5A26;
    --orange-color: #F04037;
    --orange10-color: #F0403726;
    --violet-color: #5454D4;
    --violet10-color: #5454D426;
    --blueCard-color: #00324E;
    --greenCard-color: #144E00;
    --violetCard-color: #4E0041;
    --brownCard-color: #4E2F00;
    --dark-font-color: #19191B;
    --calc-color: #D9D9D9;
    --darkGrey-color: #7B7A7A;
    --darkGrey2-color: #A6A7AB;
    --danger-opacity: 30%;
    --smallest-size: 12px;
    --overSmall-size: 13px;
    --extraSmall-size: 14px;
    --small-size: 18px;
    --middle-size: 21px;
    /* --middle28-size: 28px; */
    --big-size: 32px;
    --extraBig-size: 52px;
    --overBig-size: 70px;
    --middle-width: 1400;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    :root {
        --smallest-size: 11px;
        --overSmall-size: 12px;
        --preSmall-size: 15px;
        --extraSmall-size: 13px;
        --small-size: 16px;
        --middle-size: 18px;
        --big-size: 24px;
        --extraBig-size: 30px;
        --overBig-size: 50px;
        --middle-width: 768;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --smallest-size: 11px;
        --overSmall-size: 12px;
        --extraSmall-size: 13px;
        --preSmall-size: 15px;
        --small-size: 16px;
        --middle-size: 18px;
        --big-size: 24px;
        --extraBig-size: 25px;
        --overBig-size: 40px;
        --middle-width: 650;
    }
}

@media screen and (max-width: 575px) {
    :root {
        --middle-width: 450;
        --smallest-size: 11px;
        --overSmall-size: 12px;
        --extraSmall-size: 13px;
        --preSmall-size: 14px;
        --small-size: 14px;
        --middle-size: 16px;
        --big-size: 22px;
        --extraBig-size: 23px;
        --overBig-size: 30px;
    }
}