html {
  /* Primaire kleuren */
  --oranje: rgb(234, 91, 12); /* Toren Oranje */
  --donkerblauw: rgb(51, 52, 103); /* Paars blauw */
  --groen: rgb(142, 163, 75); /* Mos groen */
  --zeegroen: rgb(8, 91, 100); /* Zee */
  --grijsbruin: rgb(105, 96, 79); /* Modder */
  --lichtblauw: rgb(180, 189, 208); /* Lucht blauw */

  /* Secundaire kleuren */
  --donkergroen: rgb(41, 89, 63); /* Bos */
  --gras: rgb(106, 164, 38); /* Gras */
  --roze: rgb(249, 193, 157); /* Kauwgom */
  --grijs: rgb(188, 181, 172); /* Steen */

  scrollbar-gutter: stable; /* Maakt ruimte voor scroll bar op alle pagina's */
}

/* Selecteerd alles */
* {
  box-sizing: border-box; /* Neemt de padding en border mee in de afmetingen van elementen */
  font-family: Arial; /* Font */
}

/* Om duidelijk te maken op welke buurtpagina je zit */
.active {
  text-decoration: underline;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.4; /* Algemene ruimte tussen teksten voor betere leesbaarheid */
}

.home-header {
  background-color: var(--lichtblauw);

  a {
    color: var(--donkerblauw);
  }
}

.header-zuidoost {
  background-color: var(--zeegroen);

  a {
    color: white;
  }
}

.header-oost {
  background-color: var(--donkerblauw);

  a {
    color: white;
  }
}

/* Header volgens de hoofdkleur */
.header-nieuw-west-hoofdkleur {
  background-color: var(--groen);

  a {
    color: black;
  }
}

/* Alternative header om aan de opdrachtgever te laten zien */
.header-nieuw-west-betere-kleur {
  background-color: var(--donkergroen);

  a {
    color: white;
  }
}

/* OPMAAK HEADER */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  padding: 1.25rem;

  h1 a {
    font-size: 2.25rem;
    text-decoration: none;
    padding-right: 16px;
  }

  nav {
    flex-grow: 1;

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(1.5rem, 5vw, 8rem);
      justify-content: center;

      margin: 0;
      padding: 0;

      list-style-type: none;

      li a {
        display: block;
        text-align: center;

        font-size: 1.5rem;
        color: var(--donkerblauw);
        text-decoration: none;

        font-weight: bold;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.wolk-met-vogel,
.wolk {
  width: 150px;
  display: none;
}

.wolk {
  @media (min-width: 1190.4px) {
    display: initial;
  }
}

.wolk-met-vogel {
  @media (min-width: 1023.2px) {
    display: initial;
  }
}

/* Zet de container in het midden */
main {
  display: flex;
  justify-content: center;
  padding-bottom: 2rem;
}

.article-container {
  display: grid;
  gap: 2rem;
  padding-top: 2rem;

  grid-template-columns: 1fr; /* Op mobiel 1 colom */

  @media (min-width: 678px) {
    grid-template-columns: 1fr 1fr; /* Op tablet 2 colommen */
  }

  @media (min-width: 1100px) {
    grid-template-columns: 1fr 1fr 1fr; /* Op desktop 3 colommen */
  }
}

.article {
  max-width: 300px;

  a {
    text-decoration: none;
  }
}

/* Zorgt voor de zoom van de image als je over hovert */
.image-container {
  overflow: hidden;

  img {
    width: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    display: block;
  }

  img:hover {
    transform: scale(1.1);
  }
}

.preview-article-title {
  font-size: 1rem;
  color: var(--donkerblauw);
  margin: 0;
}

.preview-article-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--donkerblauw);
}

/* Zet de nieuws header op de goede plek voor elke grid-layout */
h2 {
  font-size: 1.5rem;
  color: var(--donkerblauw);

  @media (min-width: 678px) {
    grid-area: 1 / 1 / 2 / 3;
  }

  @media (min-width: 1100px) {
    grid-area: 1 / 1 / 2 / 4;
  }
}