/************/
/* CSS FILE */
/************/

* {
    box-sizing: border-box;
  }
  
  :root {
  
      /* ACHTERGROND */
      --background-color: white;
      /*NAVBAR TEXT-KLEUR*/
      --navbartext-color: white;
      /* TEXT-KLEUR*/
      --text-color: #342E2E;
      /*MAINTEXT BACKGROUND-KLEUR*/
      --maintext-backgroundcolor: #342E2E;
      /* FONT-TEXT */
      --fonttext: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  /* BODY */
  
  body {
      background-color: var(--background-color);
  }
  
  /* HEADER */
  
  header nav {
      display: flex;
      background-color: #342E2E;
  
      padding-top: 1em;
      padding-bottom: 1em;
      padding-left: 1em;
  }
  
  header nav ul {
      display: flex;
      align-items: center;
      gap: 2em;
  }
  
  header nav ul li {
      list-style-type: none;
  }
  
  header nav ul li a:hover {
      color: #9A7C58;
  }
  
  header nav img {
      width: 8em;
  }
  
  header nav ul li a{
      color: var(--navbartext-color);
      font-family: var(--fonttext);
  
      text-decoration: none;
      padding: 0;
  }
  
  /* MAIN */
  
  /* MAIN SECTION 1 */
  
  .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
      margin-bottom: 0.5em;
  }
  
  .column {
      flex: 25%;
      max-width: 25%;
      padding: 4px;
  }
    
  .column img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
  }
  
  .column:nth-of-type(1) img{
      padding: 0;
  }
  
/* FOOTER */

footer {
    text-align: center;
    background-color: #342E2E;
    color: #fff;
    font-family: Arial, sans-serif;

    margin-top: 2em;
    padding: 0.5em;
}

footer p:nth-of-type(1) {
    padding-bottom: 1em;
}

footer a {
    color: #9A7C58;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
  
  
  
  /* MOBIEL FORMAAT*/
  
  @media (width < 40em) {
  
      /* HEADER */
  
      header nav {
          display: grid;
          font-size: 3.5vw;
          padding-left: 0;
      }
  
      header nav a { /* LOGO */
          display: flex;
          justify-content: center;
          padding-bottom: 1em;
      }
  
      header nav ul {
          display: flex;
          justify-content: center;
          padding: 0;
      }
  
      /* MAIN */
  
      /* MAIN SECTION 1 */
  
      .column {
          flex:50%;
          max-width: 50%;
          padding: 4px;
      }
  
      .column:nth-of-type(3) {
          margin-top: -0.3em;
      }

      .column:nth-of-type(4) {
        margin-top: -8vw;
    }
  
      /* FOOTER */
  
      footer {
        font-size: 3vw;
    }
  
}