h1 {
  color: var(--h1Color);
  text-shadow: 0px 1px 4px rgb(0 0 0 / 30%), 0px 2px 13px rgb(0 0 0 / 30%),
    0px 3px 23px rgb(0 0 0 / 30%);
}

body {
  margin: 0;
}

main {
  display: grid;
  grid-template-columns: 1em 1fr 1em;
}

main > article {
  grid-column: 2/3;
}

main > section {
  grid-column: 2/3;
}

header > a:nth-of-type(1) > svg {
  height: 2em;
  color: var(--logoKleurHome);
}

main > section:nth-of-type(1) {
  grid-column: 1/-1;
  background-image: url("../images/banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 20.5em;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (width > 50em) {
  main > section:nth-of-type(1) {
    grid-column: 1/-1;
    height: 30.5em;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

main > section:nth-of-type(1) > section:nth-of-type(1) {
  display: flex;
  align-items: center;
  background-color: var(--backgroundColor);
  border-radius: var(--buttonBorderRadius);
  padding: 1rem;
  margin: 2em 1em 0 1em;
}

@media (width > 50em) {
  main > section:nth-of-type(1) > section:nth-of-type(1) {
    display: flex;
    width: 60%;
  }
}

main > section > section:nth-of-type(1) > svg {
  height: 2em;
  width: auto;
  padding-right: 1rem;
}

main > section > section:nth-of-type(1) > input {
  height: 1.5em;
  border: none;
  font-size: 1.1em;
  background-color: var(--backgroundColor);
}

/* Article 1 */
main > article:nth-of-type(1) > section {
  border-bottom: 0.1em solid grey;
}

main > article:nth-of-type(1) > section > section {
  margin: 1em 0 1em 0;
  display: grid;
  grid-template-columns: 2em 1fr;
  align-items: center;

  p {
    color: var(--tekstKleur);
  }
}

article:nth-of-type(1) > section img {
  height: 1em;
}

/* Article 2, section 2 */
article:nth-of-type(2) > section:nth-of-type(1) {
  margin: 2rem 0 1rem 0;
}
article:nth-of-type(2) > section:nth-of-type(2) {
  display: grid;
  margin: 1rem 0 2rem 0;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

@media (width > 50em) {
  article:nth-of-type(2) > section:nth-of-type(2) {
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

/* Article 2, section 2 - directe child > daar de directe section van*/
article:nth-of-type(2) > section:nth-of-type(2) > a section {
  display: flex;
  height: 3.5em;
  border-radius: var(--cardBorderRadius);
  background-color: var(--cardAchtergrondkleurHome);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

article:nth-of-type(2) > section:nth-of-type(2) > a section:hover {
  background-color: var(--hoverButtonLink);
}

article:nth-of-type(2) section:nth-of-type(2) img {
  display: flex;
  margin-right: 0.5em;
  height: 1.7em;
}

@media (width > 50em) {
  article:nth-of-type(2) > section:nth-of-type(2) > a section {
    height: 4em;
    padding: 0.5rem 1rem;
  }

  article:nth-of-type(2) section:nth-of-type(2) h3 {
    font-size: 1.2em;
  }

  article:nth-of-type(2) section:nth-of-type(2) img {
    height: 2.5em;
  }
}

/* Article 3 Aanbevelingen en Article 4 Trending*/
/* Carrousel */
article:nth-of-type(3) ul,
article:nth-of-type(4) ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1em;
  margin: 1rem 0 2rem 0;
  scrollbar-width: none;

  width: calc(100dvw - 2em);
}

article:nth-of-type(3) ul a:focus,
article:nth-of-type(4) ul a:focus {
  border: 0.15em solid var(--accentKleurBlauwFocus);
  border-radius: var(--buttonBorderRadius);
  transition: 0.1s;
}

article:nth-of-type(3) ul li a {
  background-color: var(--cardAchtergrondkleurHome);
  border-radius: var(--cardBorderRadius);
  width: 18em;
  height: 23em;
  flex-shrink: 1;
  scroll-snap-align: center;
}

article:nth-of-type(4) ul li a {
  display: flex;
  flex-direction: column;
  background-color: var(--cardAchtergrondkleurHome);
  border-radius: var(--cardBorderRadius);
  width: 18em;
  height: 19em;
  flex-shrink: 1;
  scroll-snap-align: center;
}

article:nth-of-type(3) ul li a:hover,
article:nth-of-type(4) ul li a:hover {
  background-color: var(--hoverButtonLink);
}

@media (width > 50em) {
  article:nth-of-type(3) ul li a {
    width: 22em;
    height: 25em;
  }

  article:nth-of-type(4) ul li a {
    width: 22em;
    height: 22em;
  }
}

@media (width > 60em) {
  article:nth-of-type(3) ul li a {
    width: 28em;
    height: 28em;
  }

  article:nth-of-type(4) ul li a {
    width: 28em;
    height: 25em;
  }
}

article:nth-of-type(3) ul li a {
  display: flex;
  flex-direction: column;
}

article:nth-of-type(3) ul li a img,
article:nth-of-type(4) ul li a > img {
  border-radius: 0.75em 0.75em 0 0;
  width: 100%;
  order: -1;
}

article:nth-of-type(3) ul li a p:nth-of-type(1) {
  margin-top: auto;
  margin-bottom: auto;
  padding: 1rem;
  font-weight: 600;
  color: var(--h4Kleur);
}

/* Padding voor de h3 van aanbevelingen, 
de h3 van trending en de h4 van trending */
article:nth-of-type(3) ul li a h3,
article:nth-of-type(4) ul li a h3,
article:nth-of-type(4) ul li a h4 {
  padding: 1rem 1rem 0 1rem;
}

article:nth-of-type(4) ul li a h4 {
  margin-bottom: auto;
}

article:nth-of-type(3) ul li a p:nth-of-type(2) {
  font-size: 1em;
  font-weight: 600;
  margin-top: auto;
  margin: 0 1rem 1rem 1rem;

  border: 0.05em solid var(--h4Kleur);
  border-radius: 30em;
  padding: 0.1rem 0.8rem;
  width: max-content;
}

/* Article 4, enkele card*/
/* article:nth-of-type(4) section:nth-of-type(2) {
  display: grid;
  grid-template-rows: max-content 3em 1fr max-content 1em;
  grid-template-columns: 1em max-content 1fr 1em;

  grid-template-areas:
    "image  image  image  image"
    ".      titel   .     .   "
    ".      tekst   icoon .   "
    ".      datum   .     .   "
    ".      .       .     .   ";
  margin: 1em 0 2em 0;
  background-color: var(--cardAchtergrondkleur);
  border-radius: 0.75em;
}

article:nth-of-type(4) section:nth-of-type(2) h3 {
  grid-area: titel;
  padding-top: 1em;
}

article:nth-of-type(4) section:nth-of-type(2) h4 {
  grid-area: tekst;
}

article:nth-of-type(4) section:nth-of-type(2) > img:nth-of-type(1) {
  width: 100%;
  border-radius: 0.75em 0.75em 0 0;
  grid-area: image;
}

article:nth-of-type(4) section:nth-of-type(2) > p:nth-of-type(1) {
  grid-area: datum;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

article:nth-of-type(4) section:nth-of-type(2) p img {
  grid-area: datum;
  height: 1.2em;
}

article:nth-of-type(4) section:nth-of-type(2) button {
  appearance: none;
  border: none;
  grid-area: icoon;
  justify-self: end;
}

article:nth-of-type(4) section:nth-of-type(2) button > img {
  grid-area: icoon;
  height: 2em;
} */

article:nth-of-type(4) ul li a p {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 1rem;

  svg {
    height: 1.5em;
    align-items: center;
    padding-left: 1rem;
    color: var(--datumEnSVGKleur);
  }
}

article:nth-of-type(4) ul li {
  display: flex;
  position: relative;
}

article:nth-of-type(4) ul li a:focus,
article:nth-of-type(3) ul li a:focus {
  appearance: none;
  outline: 0.2em solid var(--accentKleurBlauw);
  outline-offset: -0.3em;
}

article:nth-of-type(4) ul li button {
  appearance: none;
  border: none;
  background: none;
  height: 2.5em;
  width: 2.5em;
  position: absolute;
  right: 1em;
  bottom: 3em;
  color: var(--grijzeButtons);
}

/* Section 2 */
main > section:nth-of-type(2) section {
  display: flex;
  align-items: center;
  justify-content: space-between;

  a {
    display: flex;
    justify-content: center;
    font-weight: 600;
    color: var(--accentKleurBlauw);

    width: 5em;
    padding: 0.5rem 0.5rem;
    border-radius: 10em;
    background-color: var(--accentKleurBlauwButtonAchtergrond);

    :hover {
      background-color: var(--accentKleurBlauw);
    }
  }
}

main > section:nth-of-type(2) section a:hover {
  background-color: var(--accentKleurBlauw);
  color: white;
}

section:nth-of-type(2) > article {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
  background-color: var(--cardAchtergrondkleurHome);
  border-radius: var(--cardBorderRadius);
  padding: 1rem;
  margin: 1rem 0;
}
section:nth-of-type(2) > article:hover {
  background-color: var(--hoverButtonLink);
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-area
en de docent voor het gebruiken van grid-area */
@media (width > 50em) {
  main > section:nth-of-type(2) {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "h2        toonMeer"
      "shelter   nexup"
      "theWeeknd heartstring"
      "rrKickoff .";

    margin: 1rem 0 2rem 0;
  }

  main > section:nth-of-type(2) section {
    grid-area: h2;
    align-items: center;
    justify-content: space-between;

    a {
      grid-area: toonMeer;
      font-weight: 600;
      color: var(--accentKleurBlauw);
      padding: 0.5rem 1rem 0.5rem 1rem;
      border-radius: 10em;
      background-color: var(--accentKleurBlauwButtonAchtergrond);
      width: 5em;
      text-align: center;
    }
  }

  section article:nth-of-type(1) {
    grid-area: shelter;
    margin: 0;
  }

  section article:nth-of-type(2) {
    grid-area: nexup;
    margin: 0;
  }

  section article:nth-of-type(3) {
    grid-area: theWeeknd;
    margin: 0;
  }

  section article:nth-of-type(4) {
    grid-area: heartstring;
    margin: 0;
  }

  section article:nth-of-type(5) {
    grid-area: rrKickoff;
    margin: 0;
  }
}

article > a {
  flex-grow: 1;

  display: grid;
  grid-template-columns: 3em max-content 1fr;
  grid-template-rows: auto auto auto;

  grid-template-areas:
    "img  title    title"
    "img  locatie  locatie"
    "img  datum    tickets";

  align-items: center;
  background-color: var(--cardAchtergrondkleur);
  border-radius: var(--buttonBorderRadius);
  column-gap: 1em;
}

section article a > img:nth-of-type(1) {
  height: 3em;
  width: 3em;
  border-radius: var(--buttonBorderRadius);
  grid-area: img;
}

section article a :is(h3, p) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
}

section article a p {
  font-weight: 400;
  color: var(--h4Kleur);
}

/* :has is code van de docent */
section article a p:nth-of-type(2):has(svg) {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 600;

  svg {
    height: 1.5em;
    display: flex;
    color: var(--datumEnSVGKleur);
    align-items: center;
  }
}

/* :has is code van de docent */
section article a p:nth-of-type(3):has(svg) {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 600;

  svg {
    height: 1.2em;
    display: flex;
    color: var(--ticketEnAantalKleur);
    align-items: center;
  }
}

section article button {
  border-style: none;
  background: none;
  appearance: none;

  svg {
    height: 2.5em;
    color: var(--grijzeButtons);
    align-items: center;
  }
}

section article button svg:hover {
  animation: rotateHover 0.4s;
  cursor: pointer;
  transition: 0.2s;
}

/* https://css-tricks.com/almanac/rules/k/keyframes/, opfrisser voor het gebruik van keyframes*/
@keyframes rotateHover {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(30deg);
  }

  66% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(0);
  }
}

section article button svg:active {
  color: orange;
  transform: scale(1.2);
}

section article a h3 {
  /* grid-column: 2/4; */
  /* grid-row-start:1; */
  grid-area: title;
}

section article a p:nth-of-type(1) {
  /* grid-column: 2/4; */
  /* grid-row-start: 2; */
  grid-area: locatie;
  /* text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}

section article a p:nth-of-type(2) {
  /* grid-column-start: 2; */
  /* grid-row-start: 3; */
  grid-area: datum;
  /* text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}

section article a p:nth-of-type(3) {
  /* grid-column-start: 2; */
  /* grid-row-start: 3; */

  grid-area: tickets;
  /* text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; */
  color: var(--ticketEnAantalKleur);
  /* justify-content: flex-end; */

  /* display:flex;
  align-items: center;
  gap:.25em; */

  /* img {
    height:1.2em;
  } */
}

/* Article 5 */
main > article:nth-of-type(5) {
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 2em 0 4em 0;
  padding: 2rem;
  gap: 2em;

  border: 0.05em solid #3b424b;
  border-radius: var(--cardBorderRadius);
  align-items: center;

  img {
    height: 4em;
    width: 4em;
    order: -1;
    align-self: center;
  }

  /* & van een studen-assistent */
  &.hidden {
    display: none;
  }
}

@media (width > 50em) {
  main > article:nth-of-type(5) {
    display: flex;
    justify-self: center;
    width: 50%;
  }
}

main > article:nth-of-type(5) > section {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;

  p {
    font-weight: 400;
  }
}

main > article:nth-of-type(5) button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  background: none;
  border: none;

  :hover {
    background-color: var(--hoverButtonLink);
    border-radius: 50em;
  }

  :focus {
    transform: scale(1.05);
  }

  svg {
    height: 2em;
  }
}

main > article:nth-of-type(5) a {
  padding: 1rem 2.5rem;
  color: white;
  background-color: var(--accentKleurBlauw);
  margin-top: 1em;
  border-radius: var(--buttonBorderRadius);
  align-self: center;
}

main > article:nth-of-type(5) a:hover {
  background-color: var(--hoverButtonLinkBlauw);
}

main > article:nth-of-type(5) a:focus {
  /* https://www.w3schools.com/
  cssref/tryit.php?filename=trycss3_outline-offset 
  outline voor focus binnen elementen. Betere zichtbaarheid*/
  transform: scale(1.01);
  outline: 0.2em solid white;
  outline-offset: -0.3em;
}

main > article:nth-of-type(5) a:active {
  transform: scale(1.05);
}