article, header, nav, footer {
  padding: 0 5px 0 10px;
  box-sizing: border-box;
}

/* GRID */

.logo {
  grid-area: logo;
  align-content: center;
}
.menu {
  grid-area: menu;
}
.main-head {
  grid-area: header;
  background-color: white;
  text-align: center;
  top: 0;
}
  .content {
    grid-area: content;
    background-color: whitesmoke;
    padding: 0 5px 0 10px;
  }
  .main-nav {
    grid-area: nav;
    padding: 0 5px 0 10px;
  }
  .side {
    grid-area: sidebar;
  }
  .ad {
    grid-area: ad;
  }
  .main-footer {
    grid-area: footer;
    background-color: lightskyblue;
    text-align: center;
  }
  .copyright {
      grid-area: copyright;
      background-color: darkkhaki;
      text-align: center;
  }
  .sitemap {
    visibility: hidden;
  }
  .wrapper {
    display: grid;
    grid-gap: 20px;
      grid-template-areas: 
      "logo"
      "header"
      "content"
      "sidebar"
      "ad"
      "nav"
      "footer"
      "copyright";
  }
  @media (min-width: 500px) {
    .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas: 
        "logo"
        "header"
        "nav"
        "sidebar"
        "content"
        "ad"
        "footer"
        "copyright";
    }
    nav ul {
      display: flex;
      justify-content: space-between;
      list-style: none;
    }
  }
  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "logo   header  sidebar"
        "nav    content sidebar"
        "nav    content ad"
        "nav footer  ad"
        "nav copyright ad"
     }
     nav ul {
       flex-direction: column;
     }
}

/* MISC */
* {font-family: century gothic;
}
* img {
    max-width: 100%;
    height: auto;
}
h1 {
  text-align: center;
  }
h2, h3 {
  text-align: center;
}    
img.displayed {
  align-content: center;
}
a:link {
    text-decoration: none;
  }
address {
  text-align: center;
}
q {font-style: italic;
color: gray;
}
ul {
  list-style-type: none;
}
blockquote {
  padding: 0em 1em 0em 1em;
  position: relative;
  color: black;
  background-color: orange;
  border: 1px solid black;
}
blockquote p {
  color: black;
  text-align: center;
}
blockquote cite {
  font-weight: bold;
}