article {
  padding: 0 1rem;
  justify-content: center;
}

header {
  background-color: var(--headerAchtergrondKleur);
}

header button {
  appearance: none;
  border: none;
  background: none;
}

header svg {
  height: 2em;
  color: var(--logoKleurHHW);
}

header section {
  display: flex;
  align-items: center;
  gap: 1em;

  button {
    display: flex;
    align-items: center;
    appearance: none;
    border: none;
    background: none;
    height: 3em;

    > svg {
      height: 3em;
      color: var(--grijzeButtonsHHW);
    }
  }

  a {
    display: flex;
    align-items: center;

    svg {
      height: 2.5em;
      color: var(--grijzeButtonsHHW);
    }
  }
}

main > section:nth-of-type(1) {
  background-color: var(--headerAchtergrondKleur);
  text-align: center;
}

main > section:nth-of-type(1) > button {
  display: flex;
  color: white;
  background-color: var(--buttonHHWKleur);
  padding: 1rem 2rem;
  border-radius: var(--buttonBorderRadius);
  font-size: 1em;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  appearance: none;
  border: none;

  svg {
    height: 0.7em;
  }
}

main > article:nth-of-type(3) a {
  display: flex;
  color: white;
  background-color: var(--buttonHHWKleur);
  padding: 1rem 2rem;
  border-radius: var(--buttonBorderRadius);
  font-size: 1em;
  justify-content: center;
  align-items: center;
  gap: 0.5em;

  svg {
    height: 0.7em;
  }
}

@media (width > 50em) {
  main > article:nth-of-type(3) a {
    display: flex;
    justify-self: center;
    font-size: 1.2em;
    padding: 1.5rem 2rem;
  }

  main > section:nth-of-type(1) > button {
    font-size: 1.2em;
    appearance: none;
    border: none;
    padding: 1.5rem 2rem;

    svg {
      height: 0.7em;
    }
  }
}

main > section:nth-of-type(1) button:hover,
article:nth-of-type(3) a:hover {
  background-color: var(--buttonHHWKleurHover);
  cursor: pointer;
}

main > section:nth-of-type(1) button:active,
article:nth-of-type(3) a:active {
  background-color: var(--buttonHHWKleurActive);
}

main > section:nth-of-type(1) button:focus {
  transform: scale(1.01);
  outline: 0.2em solid white;
  outline-offset: -0.3em;
}

article:nth-of-type(3) a:focus {
  transform: scale(1.01);
  outline: 0.2em solid white;
  outline-offset: -0.3em;
}

main > section:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3em;
  padding: 3rem 2rem;

  p {
    color: white;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1.1em;
  }
}

@media (width > 50em) {
  main > section:nth-of-type(1) p {
    width: 80%;
    font-size: 1.4em;
  }
}

/* Article 1 Waarom Ticketswap */
article:nth-of-type(1) {
  padding: 0 1rem;
}

article:nth-of-type(1) {
  background-color: var(--sectieAchtergrondKleurHHW);

  a {
    color: var(--accentKleurBlauw);
    text-decoration: underline;
  }
  svg {
    height: 0.8em;
    color: var(--accentKleurBlauw);
  }
}

article:nth-of-type(1) h2 {
  padding-top: 1.5rem;
  text-align: center;
}

article:nth-of-type(1) section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7em 3em 1fr;
  padding: 2rem 0;
  align-items: center;
}

article section > img {
  grid-row-start: 1;
  justify-self: center;
  align-self: center;
}

article section h3 {
  grid-row-start: 2;
  font-family: "proxima-nova-light";
  font-size: 1.4em;
  font-weight: 400;
  padding-bottom: 1em;
}
article section p {
  grid-row-start: 3;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.5;
}

@media (width > 50em) {
  article section p {
    font-size: 1.3em;
  }
}

@media (width > 50em) {
  article section h3 {
    font-family: "proxima-nova-light";
    font-size: 1.6em;
  }
}

@media (width > 50em) {
  article:nth-of-type(1) section {
    display: grid;
    grid-template-columns: 10em 1fr;
    grid-template-rows: 1fr;
    /* Waarom wel met 1fr en niet met 1fr 1fr? */
    padding: 2rem 4rem;
  }

  article:nth-of-type(1) section img {
    grid-row: span 3;
    justify-self: center;
    align-self: center;
  }

  article:nth-of-type(1) section h3 {
    grid-row-start: 1;
    grid-column-start: 2;
  }

  article:nth-of-type(1) section p {
    grid-column-start: 2;
    font-size: 1.3em;
    font-weight: 400;
  }
}

/* Article 2, Tickets kopen */
article:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem;
  h2 {
    padding-bottom: 1rem;
    text-align: center;
  }

  a {
    color: var(--accentKleurBlauw);
    text-decoration: underline;
  }
  svg {
    height: 0.7em;
    color: var(--accentKleurBlauw);
  }
}

article:nth-of-type(2) section {
  padding: 1rem 0 2rem 0;
}

article:nth-of-type(2) button {
  display: flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  border: none;
  padding: 1rem 2rem;
  margin: 0 4em;
  gap: 0.5em;

  font-size: 1em;
  font-family: "proxima-nova-sBold";
  color: var(--buttonEnTekstHHWKleurBlauw);
  background-color: var(--accentKleurBlauwButtonAchtergrond);
  border-radius: var(--buttonBorderRadius);

  cursor: pointer;

  svg {
    order: -1;
    height: 1em;
  }
}

article:nth-of-type(2) > button:hover {
  background-color: var(--accentKleurBlauw);
  color: white;

  svg {
    color: white;
  }
}

@media (width > 50em) {
  article:nth-of-type(2) > h2 {
    grid-column: span 2;
    grid-row-start: 1;
  }

  article:nth-of-type(2) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 5em 1fr 1fr 5em;
    gap: 2rem;
    padding: 2rem 4rem;

    button {
      display: flex;
      justify-self: center;
    }
  }

  article:nth-of-type(2) h2 {
    text-align: center;
  }

  article:nth-of-type(2) > button {
    grid-column: 1 / span 2;
    padding: 0.5rem 2rem;
    font-size: 1.2em;

    gap: 1em;
    border-radius: var(--buttonBorderRadius);

    svg {
      order: -1;
      height: 1.5em;
      color: var(--buttonEnTekstHHWKleurBlauw);
    }
  }
}

article:nth-of-type(3) {
  background-color: var(--sectieAchtergrondKleurHHW);
  padding: 2rem 1rem;
  border-bottom: 0.1em solid grey;

  h2 {
    text-align: center;
    padding-bottom: 1em;
  }
}

@media (width > 50em) {
  article:nth-of-type(3) {
    padding: 2rem 5rem;
    font-size: 1.1em;
  }
}

article:nth-of-type(3) > p {
  padding-bottom: 8rem;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1.1em;
}

@media (width > 50em) {
  article:nth-of-type(3) > p {
    width: 80%;
    font-size: 1.3em;
  }
}

ol {
  margin: 0;
  padding-top: 1rem;
  list-style-type: none;
  display: grid;
  gap: 4em;
  height: max-content;
  background-color: var(--cardAchtergrondkleur);

  /* https://css-tricks.com/
  css-counters-custom-list-number-styling/ 
  en de docent*/
  counter-reset: my-awesome-counter;
}

ol li {
  counter-increment: my-awesome-counter;
  display: grid;
  position: relative;
}

ol li h3 {
  padding: 1rem 0;
}

ol li section {
  display: grid;
  grid-template-rows: 10em max-content max-content;
  align-items: center;
  background-color: var(--cardAchtergrondkleurHHW);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: var(--cardBorderRadius);
  padding: 2rem;
  margin-bottom: 5em;
}

ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold;
  position: absolute;
  top: -5em;
  left: calc(50% - 1.5em);
  width: 4em;
  aspect-ratio: 1/1;
  border: solid 0.2em currentcolor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accentKleurBlauw);
}

@media (width > 50em) {
  ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
  }

  article:nth-of-type(3) > h2 {
    text-align: center;
  }

  article:nth-of-type(3) ol a {
    grid-column-start: span 2;
    font-size: 1.2em;
    width: max-content;
    padding: 1.5rem 2rem;
  }
  ol li h3 {
    font-size: 1.6em;
  }

  ol li p {
    font-size: 1em;
  }
}

@media (width > 60em) {
  ol li p {
    font-size: 1.1em;
  }
}

article:nth-of-type(4) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 4em 1fr 1fr;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;

  h2 {
    grid-row-start: 2;
    justify-self: center;
  }

  p {
    grid-row-start: 3;
    font-weight: 400;
    text-align: center;
    font-size: 1.1em;
    line-height: 1.5;
  }

  svg {
    grid-row-start: 1;
    justify-self: center;
    height: 5em;
  }
}

@media (width > 50em) {
  article:nth-of-type(4) {
    padding: 4rem 5rem;
    gap: 2em;
    justify-content: center;

    p {
      grid-row-start: 3;
      font-weight: 400;
      text-align: center;
      font-size: 1.2em;
      line-height: 1.5;
    }

    svg {
      height: 6em;
    }
  }
}

@media (width > 70em) {
  article:nth-of-type(4) {
    padding: 4rem 10rem;
    justify-self: center;
  }
}

article:nth-of-type(4) button {
  appearance: none;
  color: white;
  font-size: 1em;
  border: none;
  border-radius: var(--buttonBorderRadius);
  width: max-content;
  padding: 1rem 2rem;
  justify-self: center;
  background-color: var(--buttonEnTekstHHWKleurBlauw);
}

article:nth-of-type(4) button:hover {
  cursor: pointer;
  background-color: var(--hoverButtonLinkBlauw);
}

article:nth-of-type(4) button:focus {
  transform: scale(1.01);
  outline: 0.2em solid white;
  outline-offset: -0.3em;
}

@media (width > 50em) {
  article:nth-of-type(4) button {
    font-size: 1.2em;
    padding: 1.5rem 2rem;
    width: max-content;
  }
}