:root {
    --roed: #A92D23;
    --blaa: #32BFC0;
    --aeg:#f2e7c4;
    --mblaa:#102a4b;
    --lroed:#d9a3a3;


}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Khand", Times, serif;
    color: var(--mblaa);
    
    
  }
  
  .broedtext{
      font-family: "lato";
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(14, [col-start] 1fr);
 
    
    gap: 20px;
    background-color: var(--aeg);
   
  }
  .grid-container > * {
    grid-column: col-start / span 16;
  }
  @media (min-width: 500px) {
  
    .vside {
      grid-column: col-start / span 3;
      grid-row: 2;
    }
    .hside {
      grid-column: col-start / span 3;
      grid-row:3;
    }
    .footer {
      grid-column: col-start 4 / span 9;
    }



  .knap {
    background-color: var(--blaa);
  text-decoration: none;
  padding: 2% 8%;
  border-radius: 14em;
  font-size: 20px;
  
}
}