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

* {
    padding: 0;
    margin: 0;
}

:root {
    --primary: linear-gradient(148deg, var(--color1), var(--color2) 0%, var(--color1) 200%);
    --primary-opacity: linear-gradient(148deg, #73ef4ad6, #004f94d1 0%, #73ef4ad9 200%);

    --color1: #73ef4a;  /* Verde claro */
    --color2: #004f94;  /* Azul escuro */
    --color3: #ffffff;  /* Branco */
    --color4: #000000;  /* Preto */
    --color5: #636363;  /* Cinza */
    --color6: #339966;  /* Verde azulado */
    --color7: #dad9d991;;  /* Cinza claro */
    --color8: #d4d4d48f;;  /* Cinza claro 2*/

    --border: 5px;
    --font-primary: 'Roboto', sans-serif;
}

body {
    display: grid;
    grid-template-columns: 0% auto;
    grid-template-rows: 75px 1fr auto;
    grid-template-areas:
        "header header"
        "menu main"
        "footer footer";
    width: 100%;
    min-height: 99vh;
    transition: grid-template-columns .1s ease-in-out;
    font-family: var(--font-primary) ;
    overflow-y: auto;
}

header {
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-area: header;
    padding: 10px 20px;
    background-color: var(--color3);
    box-shadow: 1px 1px 3px #0000003a;
    z-index: 10;
}

main,
menu{
    padding: 10px;
}
menu {
    grid-area: menu;
    background-color:var(--color3) !important;
    min-width: 276px;
    height: 90vh;
    display: none;
    position: fixed;
    flex-direction: column;
    align-content: space-between;
    top: 74px;
    left: 0px;
    animation: slid-menu .3s ease-in-out forwards;
}

main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 20px;
    background-color: var(--color7);
}

footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--color3);
    z-index: 9;
}

.body-expanded {
    grid-template-columns: 275px auto;
}

img{
    user-select: none; /* Impede a seleção da imagem */
    -webkit-user-drag: none; /* Impede o arrastar da imagem no WebKit */
    -khtml-user-drag: none; /* Impede o arrastar da imagem no KHTML */
    -moz-user-drag: none; /* Impede o arrastar da imagem no Firefox */
    -o-user-drag: none; /* Impede o arrastar da imagem no Opera */
}

.text-center {
    text-align: center !important;
}

menu.active{
    z-index: 10;
    display: grid;
    background-color: var(--color3);
    animation: slid-menu .3s ease-in-out forwards;
}

menu.closed{
    z-index: -1;
    display: none;
}

/* Estilização do scrollbar vertical geral */
::-webkit-scrollbar {
    width: 5px; /* Largura do scrollbar */
    border-radius: 5px; /* Raio da borda do scrollbar */
    background-color: transparent; /* Cor de fundo do scrollbar */
    height: 5px;
}

/* Estilização do thumb do scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #cfcfcf; /* Cor do "thumb" do scrollbar */
    border-radius: 5px; /* Raio da borda do "thumb" */
}

/* Estilização do track do scrollbar */
::-webkit-scrollbar-track {
    background-color: transparent; /* Cor do fundo do track do scrollbar */
    border-radius: 5px; /* Raio da borda do track */
}

/* Estilização do scrollbar horizontal */
::-webkit-scrollbar-horizontal {
    height: 5px; /* Altura do scrollbar horizontal */
}

/* Estilização do thumb do scrollbar horizontal */
::-webkit-scrollbar-thumb:horizontal {
    background-color: #cfcfcf; /* Cor do "thumb" do scrollbar horizontal */
    border-radius: 5px; /* Raio da borda do "thumb" */
}

/* Estilização do track do scrollbar horizontal */
::-webkit-scrollbar-track:horizontal {
    background-color: transparent; /* Cor do fundo do scrollbar horizontal */
    border-radius: 5px; /* Raio da borda do track */
}

.hidden-web{
    display: none !important;
}
@media screen and (max-width: 800px) {
    body {
        display: grid;
        grid-template-columns: 0% auto;
        grid-template-rows: 75px 1fr auto;
        width: 100%;
        min-height: 100vh;
        grid-template-areas:
        "header header"
        "menu main"
        "footer footer";
        gap: 0px;
        overflow-y: auto;

    }
    menu {
        grid-area: menu;
        position:sticky;
        /* right: 330px; */

    }
    .body-expanded {
        grid-template-columns: 20px auto;
    }
    header {
        padding: 0px 10px;
        z-index: 10;
    }
    header .search-icon {
        display: none;
    }

    menu.active{
        z-index: 9;
        box-shadow:1px 4px 9px 0px #00000049;
    }

    menu.closed{
        animation: slid-menu-closed .3s ease-in-out forwards;
    }

    main{
        padding: 0;
    }

    .footer-home{
        height: 440px !important;
    }

    .hidden-mobile{
        display: none !important;
    }
    .hidden-web{
        display: flex !important;
    }

    @keyframes slid-menu {
        0%{
            right: 330px;
        }
        100%{
            right: 0px;;
        }
    }

    @keyframes slid-menu-closed {
        0%{
            right: 0px;
        }
        100%{
            right: 330px;
        }
    }

}