body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 0.15fr 1fr 0.05fr;     
    grid-template-columns: 0.30fr 1fr;
    grid-template-areas: 
        "layer head"
        "layer map"
        "layer foot";
}

@media screen and (max-width: 800px) {
    body {
        display: grid;
        height: 100vh;
        grid-template-rows: 0.15fr 50em 50em 0.05fr;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "head"
            "layer"
            "map"
            "foot";
    }
}


@media print {
    body {
        grid-template-rows: 5em 0.2fr 1fr 3em;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "head"
            "map"
            "foot";
    }
    aside {
        display: none;
    }
}



header {
    grid-area: head;
    background-color: black;
    color: white;   
}




footer {
    grid-area: foot;
    background-color:black;
    color: white;
}




aside {
    grid-area: layer;
    background-color: black;
    color: white;
}



section {
    grid-area: map;
    position: relative;  
    background-color: #252525;
    color: white;
}

#map-switcher {
    position: absolute;
    top: 10px;  
    right: 10px; 
    
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    z-index: 1000;
}