* {
    box-sizing: border-box;
  }
  
  body {
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Lexend", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
  }
  
  
  nav {
    background-color: #ffffff;
    width: 100%;
    min-height: 100px;
  }
  
  nav ul {
    list-style: none;
    padding-right: 3%;
    margin-top: 25px;
  }
  
  nav li {
    float: left;
    margin-top: 10px;
    padding-bottom: 25px;
  }
  
  nav a {
    text-decoration: none;
    font-size: 30px;
    color: #333333;
    padding: 20px;
  }
  
  a:hover,
  .active {
    color: #f5c5d5;
  }
  
  nav img {
    padding: 1%;
    width: 10%;
    float: right;
    margin-right: 45%;
  }
  
  nav > a:nth-child(2) {
    display: none;
  }
  
  /* --- GRID STRUCTUUR --- */
  
  #hoofd {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 10% 30% 25% 1fr auto;
    gap: 40px;
  }
  
  /* --- HEADER --- */
  
  header {
    background-image: url(../afbeeldingen/backgroundheader.jpg);
    background-position: center;
    background-size: cover;
    padding: 16%;
  }
  
  header h1 {
    color: #ffffff;
    padding: 5%;
    font-family: "Allison", cursive;
    font-weight: 300;
    font-style: normal;
    font-size: 200px;
    text-align: center;
  }
  
  /* --- MAIN CONTENT --- */
  
  main {
    grid-area: 1/1/2/8;
    margin: 1%;
    overflow: hidden;
  }
  
  main h1 {
    font-family: "Allison", cursive;
    font-weight: bolder;
    font-style: normal;
    color: #f5c5d5;
    font-size: 60px;
    float: left;
    transition: 0.5s;
  }
  
  main > h1:hover {
    color: #333333;
  }
  
  main p {
    overflow: hidden;
    float: right;
    width: 75%;
    padding-top: 1%;
    padding-right: 29%;
  }
  
  main img {
    width: 20%;
    margin-left: 5%;
    float: left;
  }
  
  /* --- BESCHRIJVING --- */
  
  #beschrijving {
    grid-area: 2/1/3/8;
    text-align: center;
    margin: 2%;
    background-color: #f5c5d5;
    border: 5px solid #f5c5d5;
    border-radius: 30px;
    padding-bottom: 20px;
  }
  
  #beschrijving :first-child {
    font-size: 50px;
    font-family: "Allison", cursive;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
  }
  
  #beschrijving :first-child:hover {
    color: #333333;
  }
  
  #beschrijving :nth-child(2) {
    font-size: 20px;
    text-align: center;
    color: #ffffff;
  }
  
  /* --- HOBBY --- */
  
  #hobby {
    grid-area: 3/1/4/8;
    padding: 1%;
  }
  
  #hobby > img {
    margin-left: 65px;
  }

  img{
    transition: transform 0.3s ease;
  }

  img:hover{
    transform: scale(1.1);
  }
  
  #hobby h2,
  #dier h2 {
    font-size: 60px;
  }
  
  h2 {
    font-family: "Allison", cursive;
    font-weight: 300;
    font-style: normal;
    font-size: 40px;
    transition: 0.5s;
  }
  
  #hobby h2:hover,
  #dier h2:hover {
    color: #f5c5d5;
  }

  #voorwerp h2:hover,
  #toekomst h2:hover{
    color: #333333;
  }
  
  /* --- ONDERDELEN: VOORWERP, TOEKOMST, DIER --- */
  
  #voorwerp,
  #toekomst,
  #dier {
    padding: 0 3%;
    display: grid;
    grid-template-columns: 60% auto;
    grid-template-rows: auto 1fr;
    gap: 10px;
  }
  
  #voorwerp {
    grid-area: 4/1/5/4;
  }
  
  #voorwerp > h2,
  #toekomst > h2 {
    grid-area: 1/1/2/4;
    background-color: #f5c5d5;
    border: 5px solid #f5c5d5;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
  }
  
  #voorwerp img,
  #toekomst img {
    width: 100%;
    grid-area: 2/3/3/4;
  }
  
  #toekomst img,
  #dier img {
    width: 70%;
  }
  
  #dier img {
    grid-area: 1/3/3/4;
  }
  
  #voorwerp p,
  #toekomst p,
  #dier p {
    grid-area: 2/1/3/2;
  }
  
  #toekomst {
    grid-area: 4/4/5/8;
  }
  
  #dier {
    grid-area: 5/1/6/8;
  }
  
  #dier > h2 {
    grid-area: 1/1/2/4;
  }
  
  #zee {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 350px 1fr;
    gap: 10px;
  }
  
  #zee :nth-child(1) {
    grid-area: 1/1/2/2;
    width: 100%;
  }
  
  #zee :nth-child(2) {
    grid-area: 1/4/2/5;
    width: 100%;
  }
  
  #zee :nth-child(3) {
    grid-area: 1/2/3/4;
    width: 100%;
  }
  
  #zee :nth-child(4) {
    grid-area: 2/2/3/4;
    width: 60%;
    margin-top: 35%;
    margin-left: 35%;
  }
  
  #zee :nth-child(5) {
    grid-area: 2/1/3/3;
    width: 75%;
  }
  
  #zee :nth-child(6) {
    grid-area: 2/4/3/5;
    width: 100%;
  }
  
  /* --- FOOTER --- */
  
  footer {
    background-color: #f5c5d5;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    overflow: hidden;
    width: 100%;
    position: absolute;
  }
  
  footer ul {
    list-style: none;
  }
  
  @media only screen and (max-width: 480px) {

    nav > a:nth-child(2) {
      display: block;
      font-size: 30px;
      margin: 20px 50px 20px 20px;
    }
  
    nav ul li {
      width: 100%;
      text-align: left;
      border-bottom: 2px solid #f5c5d5;
      cursor: pointer;
    }

    nav ul{
      display: block;
      float: left;
      background-color: #ffffff;
      position: absolute;
      left: 0;
      top: 120px;
    }
  
    nav ul.menudicht {
      display: none;
    }
  
    nav img {
      width: 30%;
      float: right;
      padding-top: 30px;
      margin-right: 33%;
    }
  
    header > h1 {
      font-size: 50px;
    }
  
    #hoofd {
      display: block;
      padding: 10px;
    }
  
    nav,
    main,
    #beschrijving,
    #hobby,
    #voorwerp,
    #toekomst,
    #dier,
    #zee {
      display: block;
      grid-area: unset;
      width: 100%;
      margin: 10px 0;
    }
  
    #voorwerp img,
    #toekomst img,
    #dier img {
      width: 100%;
    }
  
    #voorwerp p,
    #toekomst p,
    #dier p {
      padding: 10px;
    }
  
    #zee > img {
      width: 100%;
      margin-bottom: 10px;
    }
  
    main {
      display: grid;
      grid-template-columns:auto;
      grid-template-rows: auto;
      gap: 10px;
    }

    main > h1{
        grid-area: 1/1/2/4;
    }

    main > p{
        grid-area: 2/1/3/4;
        padding: 0%;
        font-size: 13px;
    }

    main > img{
        grid-area: 3/1/4/4;
        width: 100%;
        padding-right: 50px;
    }

    #hobby > img{
      width: 100%;
      margin: 0%;
    }

    #dier > h2{
      font-size: 55px;
    }

    #zee :nth-child(1),
    #zee :nth-child(2),
    #zee :nth-child(3),
    #zee :nth-child(4),
    #zee :nth-child(5),
    #zee :nth-child(6) {
      margin-top:0%;
      margin-left: 0%;
      width: 100%;
    }
  }