html{
    background-color:rgb(233, 233, 233); 
} 


 body {
    padding: 20px;
    /*background-color: rgb(204, 228, 255); */
    font-family:"Lucida Console";

     display: grid;
     grid-template-rows: .1fr .30fr .60fr .05fr;
     grid-template-columns: 1fr;
     grid-template-areas: "header" "main" "map"  "footer";
     justify-content: center;
 }

 header {
    font-family:Georgia; 
    grid-area: header;
    display: grid;
    grid-template-columns: .5fr .5fr;
    justify-content: center;
 }

.main { /* selects a class */ 
    display: grid;
    grid-area: main;
    background-color: rgb(224, 255, 255);
    padding: 10px; 
}

.pfp img
{
    width: 15%; 
    height: auto; 
}

#map { /* an element with a map id */ 
    grid-area: map;
    height: 70vh;
    padding: 10px; 
}

#footer {
    grid-area: footer;
    padding: 10px;
}