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

:root {
    --blue1: #4d6ee6;
    --blue2: #073ddb;
    --blue3: rgb(28, 5, 198);
    --yellow1: #e6c54d;
    --yellow2: #dba507;
    --light_bg: #8ec7d2;
    --dark_bg: #07485b;
    --font_1: "Keania One", sans-serif;
    --font_2: "Montserrat", sans-serif;
    --main_title: rgb(29, 32, 125);
}

.grid_container {
    display: grid;
    grid-template-areas: 
        "left main_container";
    grid-template-columns: 20dvw;
    grid-template-rows: 5dvh;
}
.left {
    grid-area: left;
    height: 100dvh;
}

.main_container {
    grid-area: head_container;
    display: flex;
    flex-direction: column;
    margin-left: 3dvw
}
.menu {
    height: 20dvh;
    width: 75dvw;
    margin: 4dvh 0;
}
.main {
    grid-area: main;
    height: 100dvh;
}


@media only screen and (max-width: 576px) {
    .grid_container {
        display: grid;
        grid-template-areas: 
            "left"
            "main_container";
        grid-template-columns: 3dvw;
        grid-template-rows: 24dvh;

}
    .left {
        width: 100dvw;
        height: 16dvh
    }
 
    .menu {
        width: 90dvw;
        height: 10dvh;
    }
   
}