* {

  font-family: Roboto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

span {
  font-style: italic;
  text-decoration: none;
  color: #f4f7f6;
  
}

html {
  /*background-image: url('/img/modelbg.jpg');*/
  background-color: #f4f7f6; /*#f5f5f5 */
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas: 
      "header header header header"
      "header header header header"
      "nav nav nav nav"
      "article article article article"
      "article article article article"
      "aside aside aside aside"
      "aside aside aside aside"
      "footer footer footer footer";
    max-width: 1440px;
    margin: 0 auto;
    border: 2px solid darkslateblue;
    background-image: url("../img/ocean4.png");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    color: #F5FEFD;

}

header {
  grid-area: header;
}

header img {
  display: block;
  width: 100%;
  height: auto;
}

#menu1 {
  display: grid;
  grid-template-columns: auto;
  background-color: #c9ebf2;
  grid-area: nav;
}

#menu1 div, #menu2 div {
  border: 1px solid #f5f5f5;
  padding: 0;
  margin: 0;
}

#menu1 div a, #menu2 div a {
  display: block;
  text-decoration: none;
  color: black;
  text-align: center;
  padding: 15px;
  font-weight: bold;
  height: 100%;
}

#menu1 div a:hover, #menu2 div a:hover {
  background-color: #757575;
}

article {
  border-top: 2px solid black;
  padding: 10px;
  grid-area: article;
}

article h1 {
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
}

article p {
  font-family: Georgia;
  font-size: 20px;
}

aside {
  border-top: 2px solid black;
  padding: 10px;
  grid-area: aside;
}

aside p {
  font-family: Georgia;
  font-size: 16px;
}

aside h2 {
  font-size: 25px;
  margin-bottom: 10px;
  text-align: center;
}

aside a {
  color: #f5f5f5;
  text-decoration: none;
}

footer {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  background-color: #212121;
  border-top: 2px solid black;
  grid-area: footer;
}

footer p {
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 15px;
  font-size: 15px;
}

#menu2 {
  display: grid;
  grid-template-columns: auto;
  font-size: 12px;
  background-color: #c9ebf2;
}

#menu2 div, menu1 div {
  border-right: none;
  border-left: none;
}

#menu2 div:last-child {
  border-bottom: none;
}

@media only screen and (min-width:760px) {

    .wrapper {
        grid-template-areas: 
          "header header header header"
          "header header header header"
          "nav nav nav nav"
          "article article article aside"
          "article article article aside"
          "article article article aside"
          "article article article aside"
          "footer footer footer footer";
 }

  article {
    border-right: 2px solid black;
  }

  #menu1 {
    grid-template-columns: repeat(4, 1fr);
  }

  footer {
    grid-template-columns: repeat(2, 1fr);
    padding-right: 0;
}

  #menu2 {
    grid-template-columns: repeat(4, 1fr);
     font-size: 12px;
}

  #menu2 div, menu1 div {
    border-right: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;
}

  #menu2 div:last-child {
    border-bottom: 1px solid #f5f5f5;
    border-right: none;
}

  #menu2 div:first-child {
    border-left: 2px solid #f5f5f5;
  }

  @media only screen and (max-width:480px) {

#content{
  
  width:480px;
  height:520px;
  margin:0px auto;
  border-radius:3px;

}

#gallery_img{
  
  width:460px;
  height:500px;
  float:left;
  position:relative;
 }
 
}

}