@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

*{
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-hover : #d1ffe4;

    /* CORES NEUTRAS */
    --white: #FFFFFF;
    --gray-100: #E2E2E2;
    --gray-200: #C2C2C2;
    --gray-300: #9B9B9B;
    --gray-400: #7D7D7D;
    --gray-500: #5C5C5C;
    --gray-600: #454545;
    --carbon: #2E2E2E;
    --blacked: #181818;

    /* CORES PADRÃO */
    --log-light: #4A8256;
    --log-base: #25562F;
    --log-low: #173A1E;

    --site-primary: #00B127;
    --site-secound: #007D1C;

    /* CORES SEMÂNTICAS */
    --success-light: #4A8256;
    --success-base: #25562F;
    --success-low: #173A1E;

    --danger-light: #FF5252;
    --danger-base: #FF2224;
    --danger-low: #C20002;

    --warning-light: #FF8C4B;
    --warning-base: #FF6F1E;
    --warning-low: #D74D00;

    --new-light: #448AFF;
    --new-base: #005FFF;
    --new-low: #003EA6;

    --alert-light: #FFEA4F;
    --alert-base: #FFE100;
    --alert-low: #B8A300;

    --notification-light: #C05AFF;
    --notification-base: #9E00FF;
    --notification-low: #60009A;

    --suport-light: #ff3f8c;
    --suport-base: #ff0066;
    --suport-low: #9a003e;

    --opacity-up: rgba(0,0,0,0.2);
}

/* HTML --------------------------------------------------------------------------------------------------------*/
html{
    font-weight: 300;
    scroll-behavior: smooth;
}

/* BODY --------------------------------------------------------------------------------------------------------*/
body{
    position: relative;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* ESTILIZAÇÃO DAS SCROLLBARS ----------------------------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-thumb{
    background: #ffffff;
    border-radius: 2px;
}
::-webkit-scrollbar-track{
    background: #EDF3F5;
}

body #container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #EDF3F5;
}

body #container_page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}