/*Basic layout header*/
body{
  min-height: 100vh;
  margin: 0;background-color: #FDF0D5;
  display: flex;
  flex-direction: column;
}

main{
  flex-grow: 1;

}

.header{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 33px 33px 33px;
  justify-items: center;
  padding: 10px 10px;
  background-color: #003049;
  color: white;
}
.header img{
  height:33px;
}

.slogan{
  grid-column: 1;
  grid-row: 2;
  font-family: "cinzel", sans-serif;
  font-size: 10px;
}

.menu{
  grid-column: 1;
  grid-row: 3;
}

.menu ul{
  display: flex;
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.menu li a{
  color: white;
  text-decoration: none;
  padding: 0 15px;
  font-family: "cinzel", sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.footer{
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 10px 10px;
  background-color: #003049;
  color: white;
  margin-top: 0;
}

.icons{
  grid-column: 1;
}

.icons img{
  height: 40px;
  width: auto;
}

.copy{
  grid-column: 3;
}

/* Main opmaak */
.grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(20px, auto);
  row-gap: 0;
}

article h2, h3, h4, h5, h6{
    font-family: "cinzel", sans-serif;
}

article{
    font-family: "lora", serif;
}

.blogpost{
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: center;
  padding: 10px;
}

@media (min-width: 768px) {
  .header{
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 75px
  }
  .header img{
  height: 75px;
  
  }

  .slogan{
  grid-column: 2;
  grid-row: 1;
  margin-top: 50px;
  }

.menu{
  grid-column: 3;
  grid-row: 1;
  margin-top: 45px;
}

/* body layout */
.grid-container{
  grid-template-columns: repeat(12, 1fr);
  row-gap: 0;
}

.blogpost{
  grid-column: 1 / 10;
}

.blogpost img{
    float: right;
    margin-top: 15px;
}

article h3{
padding: 7px;
}

}

@media (min-width: 1024px) {
  .grid-container{
    grid-auto-rows: minmax(100px, auto);
  }
}