body {
    font-family: 'Merriweather', serif;
    background-color: #B2C9AB
}
h1 {
    color: #788AA3;
    text-align: center;
    font-size: 60px;
}

.item1 { 
    grid-area: header; 
}
.item2 { 
    grid-area: menu; 
}
.item3 { 
    grid-area: main;
    font-size: 17px;
    color: #666A86;
}
.item4 { 
    grid-area: right;
    font-size: 14px;
}
.item5 { 
    grid-area: footer; 
}

img {
  border: 10px solid #666A86;
  border-radius: 4px;
  padding: 5px;
  width: 400px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 30px;
  padding: 30px;
}

.grid-container > div {
  background-color: #B2C9AB;
  text-align: left;
  padding: 60px 0;
}


a:link, a:visited {
  background-color: #92B6B1;
  color: white;
  border: 2px solid #666A86;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #666A86;
  color: white;
}

/*small screen*/
@media screen and (max-width: 500px) {
    h1{
        font-size: 30px;
    }
    .item3 {
        font-size: 12px;
    }
    .item4 {
        font-size: 9px;
    }
}