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

html{
    height: 100vh;
}

body{
    font-size: 1.2rem;
    min-height: 100%;
}

.contenedor_grid > * {
    border-radius: 0.4em;
    padding: 0.4em;
    text-align: center;
    box-shadow: -0.01em 0.01em 0.1em 0 rgb(0, 0, 0);
}

.header{
    grid-area: header;
    background-color: aquamarine;
}

.navbar{
    grid-area: navbar;
    background-color: aqua;
}

.main{
    grid-area: main;
    background-color: aquamarine;
}

.sidebar{
    grid-area: sidebar;
    background-color: teal;
}

.calendar{
    grid-area: calendar;
    background-color: rgb(255, 255, 255);
}

.footer{
    grid-area: footer;
    background-color: black;
    color: aliceblue;
}

.logo{
    grid-area: logo;
}

.logo img{
    max-height: 100%;
}

.contenedor_grid{
    display: grid;
    gap: 10px;
    /* grid-template-columns: 200px;
    grid-template-rows: 100px 50px auto 100px 100px;
    grid-template-areas: 
    "header"
    "navbar"
    "main"
    "sidebar"
    "footer"; */

    grid-template: 
    "logo     header"   50px
    "navbar   navbar"   50px
    "main     main"     auto
    "sidebar  sidebar"  100px
    "calendar calendar" auto
    "footer   footer"   100px /
    1fr       1fr
    ;

}



@media (min-width: 600px){

    .contenedor_grid{
        grid-template: 
        "logo header" 15vh
        "navbar navbar" 10vh
        "sidebar main" auto
        "calendar main" auto
        "footer footer" 15vh /
        200px auto;
    }
}

@media (min-width: 900px){

    .contenedor_grid{
        grid-template: 
        "logo      header header" 100px
        "navbar main   sidebar" auto
        "navbar main   calendar" auto
        "footer footer footer" 100px /
         200px   auto   200px;
    }
}