@font-face {
  font-family: "Arial-BoldMT";
  src: url("fonts/Arial-BoldMT.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Arial-BoldMT";
  src: url("fonts/Arial-BoldMT.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "BuurtCampusArial-Bold";
  src: url("fonts/BuurtCampusArial-Bold.ttf");
  font-weight: bold;
}

* {
  box-sizing: border-box;
  line-height: 1.4;
  font-family: Arial;
}

@layer styleguide {
  :root {
    /* Colors */
    --color-lucht-blauw: rgb(180 189 208);
    --color-zee: rgb(8 91 100);
    --color-paars-blauw: rgb(51 52 103);
    --color-mos-groen: rgb(109 125 57);
    --color-toren-oranje: rgb(234 91 12);
    --color-white: rgb(255 255 255);

    --color1: var(--color-lucht-blauw);
    --color2: var(--color-zee);
    --color3: var(--color-paars-blauw);
    --color4: var(--color-mos-groen);
    --color5: var(--color-toren-oranje);
    --color6: var(--color-white);

    /* Font sizes */
    --font-size-xxl: 2.8rem;
    --font-size-xl: 1.8rem;
    --font-size-l: 1.5rem;
    --font-size-m: 1.2rem;
    --font-size-s: 1rem;
    --font-size-xs: 0.8rem;
  }

  /* Classes voor visualisatie styleguide */
  .primary-color-main {
    background-color: var(--color1);
    color: var(--color3);
  }

  .primary-color-zuidoost {
    background-color: var(--color2);
    color: var(--color6);
  }

  .primary-color-oost {
    background-color: var(--color3);
    color: var(--color6);
  }

  .primary-color-nieuw-west {
    background-color: var(--color4);
    color: var(--color6);
  }

  .accent-color {
    background-color: var(--color5);
    color: var(--color6);
  }

  /* Kleuren voor eigen project */

  .header-main {
    background-color: var(--color1);
    color: var(--color3);
  }

  .header-zuidoost {
    background-color: var(--color2);
    color: var(--color6);
  }

  .header-oost {
    background-color: var(--color3);
    color: var(--color6);
  }

  .header-nieuw-west {
    background-color: var(--color4);
    color: var(--color6);
  }

  .main-home {
    background-color: var(--color6);
    color: var(--color3);
  }

  .main-zuidoost {
    background-color: var(--color6);
    color: var(--color2);
  }

  .main-oost {
    background-color: var(--color6);
    color: var(--color3);
  }

  .main-nieuw-west {
    background-color: var(--color6);
    color: var(--color4);
  }

  .blockquote1 {
    background-color: var(--color5);
    color: var(--color6);
  }

  .blockquote2 {
    background-color: var(--color3);
    color: var(--color6);
  }
  .blockquote3 {
    background-color: var(--color2);
    color: var(--color6);
  }

  .blockquote4 {
    background-color: var(--color4);
    color: var(--color6);
  }

  .form-button {
    background-color: var(--color3);
    color: var(--color6);
  }

  /* Typografie */
  .font-size-xxl {
    font-size: var(--font-size-xxl);
  }

  .font-size-xl {
    font-size: var(--font-size-xl);
  }

  .font-size-l {
    font-size: var(--font-size-l);
  }

  .font-size-m {
    font-size: var(--font-size-m);
  }

  .font-size-s {
    font-size: var(--font-size-s);
  }

  .font-size-xs {
    font-size: var(--font-size-s);
  }

  .bold {
    font-weight: 700;
  }

  .blockquote1 {
    background-color: var(--color5);
    color: var(--color6);
    text-align: center;
    font-style: italic;
    padding: 0.5rem 1.2rem;
    border-radius: 6rem;
    max-width: 450px;
  }

  #formulieren {
    margin: 1rem;
  }

  /* Formulier elementen */
  .contact-form {
    background-color: var(--color1);
    padding: 5rem;
    border-radius: 3rem;
    font-size: 1.2rem;

    p {
      display: flex;
      flex-direction: column;
    }
  }

  .input-field,
  .textarea-input-field {
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 1rem;
  }

  .textarea-input-field {
    resize: none;
  }

  .submit-button,
  .button {
    background-color: var(--color3);
    color: var(--color6);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5rem;
    width: fit-content;
    font-size: 1rem;
  }

  /* ✔️ gegroepeerd: Arial-BoldMT */
  h1,
  h2,
  a,
  th,
  legend {
    font-family: "Arial-BoldMT";
  }

  /* ✔️ gegroepeerd: arial */
  p,
  figcaption,
  code,
  li,
  td,
  label {
    font-family: arial;
  }

  /* navknoppen */
  a {
    font-size: var(--font-size-l);
    font-weight: bold;
    text-decoration: none;
  }

  /* body, bullits, subkop */
  p {
    font-size: var(--font-size-s);
  }

  /* figcaption */
  figcaption {
    font-size: var(--font-size-s);
  }
}

#navList {
  padding: 0 0 0 0;
  display: flex;
  gap: 0em;
  justify-content: center;
  translate: center;
  white-space: nowrap;
  flex-wrap: wrap;

  @media (min-width: 360px) {
    flex-wrap: nowrap;
  }

  @media (min-width: 570px) {
    gap: 1em;
  }
}

/* hover function met vlaggetje clipper */
.navKnopLink,
.navKnop:focus-visible {
  background-color: var(--color1);
  border-radius: 5rem;
  margin-bottom: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* knoppen in de nav */
.navKnop {
  color: var(--color3);
  padding-right: 2rem;
  translate: 0 0;
  padding: 0.1em 2.5em 0.1em 0.5em;
}

/* hover function met vlaggetje clipper */
.navKnop:hover,
.navKnop:focus-visible {
  background-color: var(--color6);
  /* padding-right: 2rem; */
  clip-path: polygon(90% 0, calc(95% - 1.5em) 50%, 90% 100%, 0 100%, 0 0);
}

/* kleurverrandering als je klikt op de navKnop */
/* .navKnop:active {
  color: lightblue;
} */
/* fixed probleem waar de list nu alleen de styling weghaalt in de nav en niet in de andere lists  */
#navList {
  list-style: none;
}

li a {
  text-decoration: none;
  padding: 0.5em;
  padding-right: 1rem;
  /* font-size: 0.8em; */
  font-weight: bold;
  display: block;
}