* {font-family: century gothic;
}
* img {
  max-width: 100%;
  height: auto;
  align-self: center;
}
* {line-height:25px;
}
header {
    image-rendering: 50%;
    height: auto;
}
footer {
    padding: 20px;
}
h1,h2,h3 {
    text-align: center;
  }
a:link {
  text-decoration: none;
  }
q {
  font-style: italic;
  color: gray;
}
ol li {
  padding: 20px 0px  0px 0px;
  font-weight: bold;
  list-style-position: inside;
}
ul li {
    padding: 0 5px 0 5px;
}
button {
   box-align: center;
}

.myButton {
  background-color:#5d88d3;
	border-radius:28px;
	border:1px solid #1f2f47;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-size:17px;
	padding:16px 31px;
  text-decoration:none;
  text-shadow:0px 1px 0px #959cb1;

}
.myButton:hover {
	background-color:#415989;
}

/* GRID */
.logo {
  grid-area: logo;
  text-align: center;
  text-size-adjust: auto;
}
.menu {
  grid-area: menu;
}
.main-head {
  grid-area: header;
  text-align: center;
  top: 0;
}
.main-nav {
    grid-area: nav;
    display: inline-block;
    justify-content: space-between;
}
.content {
    grid-area: content;
    background-color: gold;
    padding: 20px;
  }
  .side {
    grid-area: sidebar;
    background-color: lightcyan;
    padding: 20px;
  }
  .ad {
    grid-area: ad;
    padding: 20px;
  }
  .main-footer {
    grid-area: footer;
    background-color: lightskyblue;
  }
  .copyright {
      grid-area: copyright;
      background-color: darkkhaki;
      text-align: center;
  }
  .sitemap {
    visibility: hidden;
  }
  .center {
    text-align: center;  
  } 

  .wrapper {
    display: grid;
    grid-gap: 20px;
      grid-template-areas: 
      "logo"
      "header"
      "content"
      "ad"
      "sidebar"
      "nav"
      "footer"
      "copyright";
  }
  @media (min-width: 500px) {
    .wrapper {
      grid-template-areas: 
        "logo"  
        "header"
        "content"
        "ad"
        "sidebar"
        "nav"
        "footer"
        "copyright";
  }
}
  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-areas: 
        "header    logo      logo      logo      logo     logo"
        "nav       nav       nav       nav       nav       nav"
        "content   content   content   ad        ad        ad"
        "sidebar   sidebar   sidebar   sidebar   sidebar   sidebar"
        "footer    footer    footer    footer    footer    footer"
        "copyright copyright copyright copyright copyright copyright"
     }
     nav ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
      }
}