* {
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light dark;
  /* Colors */
  --text-color: light-dark(#000000, #fff7e7);
  --background-color: light-dark(lightblue, rgb(91, 88, 88));
  --pasport-color: light-dark(#d751f5, #f59baa);
  /* https://cssgradient.io/ */
  --bg-gradient: linear-gradient(
    90deg,
    rgba(204, 8, 194, 1) 0%,
    rgba(205, 107, 232, 1) 35%,
    rgba(247, 171, 245, 1) 100%
  );
  --paper-color: light-dark(antiquewhite, rgb(157, 107, 73));
  --buton-hover-color: light-dark(#e9a4f9, #f0bfc7);

  /* Sizes */
  --border-radius-book: 25px;
  --small-font-size: 13px;
  --h3-font-size: 18px;
}

/******************************************/
/*             Opmaak header.             */
/******************************************/
header {
  display: grid;
  place-content: center;
  margin: 3rem;
}

form {
  display: flex;
  justify-content: center;
  gap: 1em;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Special Elite", "Courier New", Courier, monospace;

  &:nth-of-type(3) {
    opacity: 0;
    &:hover {
      opacity: 100%;
    }
  }
}

/* Light dark buttons */
:root:has([value="dark"]:checked) {
  color-scheme: dark;

  --bg-gradient: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(224, 158, 255, 1) 50%,
    rgba(255, 163, 235, 1) 100%
  );
}

:root:has([value="light"]:checked) {
  color-scheme: light;
}

:root:has([value="disco"]:checked) {
  body {
    animation-name: discoColors;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
  }

  button {
    animation-name: discoColors;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
}

@keyframes discoColors {
  0% {
    background-color: #ff8181;
  }
  10% {
    background-color: rgb(255, 221, 158);
  }
  20% {
    background-color: rgb(254, 254, 180);
  }
  30% {
    background-color: rgb(159, 255, 159);
  }
  40% {
    background-color: rgb(147, 147, 255);
  }
  50% {
    background-color: plum;
  }
  60% {
    background-color: hotpink;
  }
  70% {
    background-color: #ff8181;
  }
  80% {
    background-color: aquamarine;
  }
  90% {
    background-color: azure;
  }
  100% {
    background-color: whitesmoke;
  }
}

/******************************************/
/*             Opmaak main.           */
/******************************************/
main {
  perspective: 90em;
  transform-style: preserve-3d;
  font-family: "Special Elite", "Courier New", Courier, monospace;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-content: center;
}

div:not(:last-of-type) {
  display: grid;
  grid-column-start: 2;
  grid-row-start: 1;
  width: fit-content;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: 1s;

  &:nth-of-type(1) {
    rotate: y -3deg;
  }
  &:nth-of-type(2) {
    rotate: y -2deg;
  }
  &:nth-of-type(3) {
    rotate: y -1deg;
  }
  &:nth-of-type(4) {
    rotate: y 0deg;
  }
}

div.omgeslagen {
  &:nth-of-type(1) {
    rotate: y -180deg;
  }
  &:nth-of-type(2) {
    rotate: y -179deg;
  }
  &:nth-of-type(3) {
    rotate: y -178deg;
  }
  &:nth-of-type(4) {
    rotate: y -177deg;
  }

  section {
    border-radius: var(--border-radius-book) 0 0 var(--border-radius-book);
  }
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure */
section {
  display: grid;
  grid-column-start: 1;
  grid-row-start: 1;
  width: 42vw;
  aspect-ratio: 3/5;
  background-color: var(--paper-color);
  backface-visibility: hidden;
  border-radius: 0 var(--border-radius-book) var(--border-radius-book) 0;
  padding: 1rem;

  &:nth-of-type(2) {
    rotate: y 180deg;
  }

  h2 {
    border: solid var(--pasport-color) 4px;
    padding: 5px;
    width: fit-content;
    color: var(--pasport-color);
    margin-top: 10px;
    height: fit-content;
    transform: rotate(-20deg);
    font-size: 1rem;
  }

  h3 {
    font-size: var(--h3-font-size);
  }

  img {
    width: 50%;
    place-content: center;
    grid-row-start: 2;
  }

  li,
  p {
    font-size: var(--small-font-size);
    line-height: 1;
    list-style-type: none;
  }
}

@media (width>750px) {
  section {
    width: 25vw;
  }
}

@media (width>400px) {
  section li,
  section p {
    line-height: 1.5;
  }
}

/******************************************/
/*   Specifieke tyling van de pagina's.   */
/******************************************/
div:first-of-type section:first-child {
  display: grid;
  grid-template-rows: 1fr 15px 15px 3fr;
  place-items: center;
  background: var(--bg-gradient);
  gap: 0.5rem;

  h1 {
    font-size: 2rem;
    grid-row-start: 1;
    text-align: center;
  }

  p {
    font-size: var(--small-font-size);
  }

  img {
    grid-row-start: 4;
  }
}

svg {
  fill: none;
  stroke: var(--text-color);
  stroke-miterlimit: 10;
  stroke-width: 8px;
  width: 80%;
  &:hover {
    animation: drawLine 6s linear forwards;
  }
}

/* https://www.youtube.com/watch?v=dRloFvC7g6I */
@keyframes drawLine {
  from {
    stroke-dasharray: 260;
  }

  to {
    /* https://css-tricks.com/almanac/properties/s/stroke-dasharray/ */
    /* https://css-tricks.com/almanac/properties/s/stroke-dashoffset/*/
    stroke-dashoffset: 0;
    stroke-dasharray: 100;
  }
}

/* My profile pagina */
div:first-of-type section:nth-of-type(2) {
  display: grid;
  grid-template-rows: 40px 1fr 1fr;

  article:nth-of-type(1) {
    display: grid;
    grid-template-columns: 1fr 1.5fr;

    ul {
      grid-row-start: 2;
    }

    img {
      width: 80%;
    }
  }

  article:nth-of-type(2) ul {
    display: flex;
    gap: 10px;
    margin-top: 1rem;

    img {
      width: 100%;
    }

    h2 {
      grid-row: 1;
    }

    h3 {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    img:hover {
      animation-name: scaleImage;
      transition: 2s;
      animation-duration: 3s;
    }
  }
}

@keyframes scaleImage {
  form {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

/* Werkpagina */
div:nth-of-type(2) section:nth-of-type(1) {
  h2 {
    grid-column-start: 1;
  }

  p:first-of-type {
    grid-row-start: 2;
    grid-column-start: 2;
  }

  p:nth-of-type(2) {
    grid-row-start: 3;
    grid-column-start: 1;
  }

  img {
    width: 100%;
  }

  img:nth-of-type(2) {
    grid-row-start: 3;
    grid-column-start: 2;
  }
}

/* De travel pagina */
div:nth-of-type(2) section:nth-of-type(2),
div:nth-of-type(3) section:nth-of-type(1) {
  ul {
    display: grid;
    gap: 10px;

    li img {
      box-shadow: 1px 1px 10px #b4b4b4;
    }

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

    li:nth-of-type(even) {
      rotate: 5deg;
    }
  }

  li:first-of-type:hover {
    animation-name: stamp;
    animation-duration: 8s;
    transition: 4s;
  }

  img {
    width: 100%;
  }
}

div:nth-of-type(3) section:nth-of-type(1),
div:nth-of-type(2) section:nth-of-type(2) {
  li:nth-of-type(2) img {
    animation: slightTwist 2s ease-in-out infinite;
  }
}

@keyframes stamp {
  0% {
    display: hidden;
  }

  50% {
    rotate: 360deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes slightTwist {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: 5deg;
  }
  50% {
    rotate: 0deg;
  }
  75% {
    rotate: -5deg;
  }
}

/* Mijn favorieten pagina */
div:nth-of-type(3) section:nth-of-type(2) {
  ul {
    display: grid;

    li img {
      width: 100%;
    }

    li:first-of-type {
      place-content: end;
    }

    li:nth-of-type(2) {
      grid-column-start: 2;
      place-content: end;
    }
  }
}

/* Pagina over medestudenten */
div:nth-of-type(4) section:nth-of-type(1) {
  li p {
    font-size: var(--small-font-size);
  }
  li p {
    font-size: 1.5rem;
  }
}

@media (width>440px) {
  div:nth-of-type(4) section:nth-of-type(1) {
    li p {
      font-size: 2.5rem;
    }
  }
}

/* The end pagina*/
div:nth-of-type(4) section:nth-of-type(2) {
  img {
    animation-name: bounce;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
}

@keyframes bounce {
  0% {
    translate: -20px;
  }
  50% {
    translate: 100px;
  }
  100% {
    translate: 0;
  }
}

/* next en terug button*/
div:last-of-type {
  display: grid;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 3;
  place-items: center;

  .prevButton {
    grid-column-start: 1;
  }

  .nextButton {
    grid-column-start: 2;
  }
}

button {
  width: fit-content;
  font-size: var(--small-font-size);
  border-radius: 30rem;
  padding: 1rem;
  margin: 10px;
  border: none;
  background-color: var(--pasport-color);
  font-family: "Special Elite", "Courier New", Courier, monospace;

  &:hover {
    background-color: var(--buton-hover-color);
  }
}