body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif, helvetica;
background: black;
color: grey;
font-size: 1em;
}
@media screen and (max-width: 500px) {
  body {
  font-size: 70%;
  }
}

#Wrapper {
display: grid;
grid-template-areas: 'top' 'banner' 'menu' 'main' 'footer'; 
}

/*Grid-Areas*/
.wrapper-gridarea-top {
grid-area: top;
}
.wrapper-gridarea-banner {
grid-area: banner;
}
.wrapper-gridarea-menu {
grid-area: menu;
}
.wrapper-gridarea-main {
grid-area: main;
}
.wrapper-gridarea-footer {
grid-area: footer; 
}

.banner-img {
width: 100%;
display: block;
}

.menu-display {
position: relative;
justify-content: center;
background: rebeccapurple;
display: grid;
grid-template-areas:"home about portfolio pricing contact";
}

.menu-item {
display: flex;
justify-content: center;
align-items: center;
width: 260px;
height: 40px;
margin: 5px;
background: thistle;
transition: 0.2s;
border-radius: 8px;
color: indigo;
text-decoration: none;
border-left: indigo 5px solid;
border-bottom: indigo 5px solid;
box-sizing: border-box;
}
.menu-item:hover {
background: dimgrey;
}
.menu-item:active {
transform: scale(0.9)
}
.menu-item h4 {
margin: 0;
}

@media screen and (max-width: 500px) {
  .menu-display {
  display: grid;
  grid-template-areas:
  "home"
  "about"
  "portfolio"
  "pricing" 
  "contact";
  }
  
  .menu-item {
  width: 90vw;
  height: 40px;
  }
}

/*Grid-Areas*/
.menu-gridarea-home {
grid-area: home; 
}
.menu-gridarea-about {
grid-area: about;
}
.menu-gridarea-portfolio {
grid-area: portfolio; 
}
.menu-gridarea-pricing {
grid-area: pricing;
}
.menu-gridarea-contact {
grid-area: contact; 
}

.menu-item-content {
text-align: center;
}

footer {
color: #0C3F58;
width: 100vw;
position: absolute;
bottom: 0;
}
footer div{
display: flex;
justify-content: center;
}