html {
    background: url(metabolism.jpeg) center center / cover no-repeat fixed;
    height: 100%;
    font-family:'Courier New', Courier, monospace;
    font-size: 16px;
}

html, body {
    padding: 5px;
 }

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

 header {
    background-color: rgb(206, 255, 92);
    grid-area: header;
    display: grid;
    grid-template-columns: .2fr .6fr .2fr;
    justify-content: center;
 }

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

.main {
    display: grid;
    grid-area: main;
    background-color: rgb(201, 207, 112);
}

#map {
    grid-area: map;
    height: 60vh;
}

#footer {
    grid-area: footer;
    color: cornsilk;
}

h1 {
    margin: .5em;
}

h3 {
    margin: .5em;
}

p {
    margin: .5em;
}

img {
    width: 300px;
    margin: .5em;

}