* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

html {
  color-scheme: light dark;

  /* Kleuren voor light en dark mode */
  --primary-background-color: light-dark(oklch(92% 0 0), oklch(10% 0 0));
  --secondary-background-color: light-dark(oklch(96% 0 0), oklch(20% 0 0));
  --tertiary-background-color: light-dark(oklch(100% 0 0), oklch(30% 0 0));

  --primary-accent-color: light-dark(oklch(5% 0 0), oklch(95% 0 0));
  --secondary-accent-color: light-dark(oklch(30% 0 0), oklch(70% 0 0));

  --primary-shadow:
    inset 0 1px 2px oklch(100% 0 0 / 18.82%), 0 2px 4px oklch(0 0 0 / 18.82%),
    0 4px 8px oklch(0 0 0 / 8.24%);
}

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

  .moon-button {
    display: grid;
  }

  .sun-button {
    display: none;
  }
}

html:has([value="dark"]:checked) {
  color-scheme: dark;

  .moon-button {
    display: none;
  }

  .sun-button {
    display: grid;
  }
}

@media (prefers-color-scheme: dark) {
  .moon-button {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  .sun-button {
    display: none;
  }
}

body {
  background-color: var(--primary-background-color);

  main {
    display: grid;
    place-items: center;
    min-height: 90dvh;
  }
}

.theme-switch {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
}

label {
  display: grid;
  place-items: center;
  height: 50px;
  aspect-ratio: 1;
  padding: 0.5rem;
  background-color: var(--tertiary-background-color);
  border-radius: 50%;
  box-shadow: var(--primary-shadow);

  path {
    fill: var(--primary-accent-color);
  }

  &:hover {
    cursor: pointer;
  }

  /* Dit geeft de button een klik-animatie */
  &:active {
    box-shadow: none;
  }

  /* Verbergt de radio-buttons om de label als input te gebruiken */
  input {
    display: none;
  }
}

.profile-card {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 3rem;
  background-color: var(--secondary-background-color);
  border-radius: 3rem;
  box-shadow: var(--primary-shadow);

  /* Zet de profile card horizontaal */
  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: flex-start;
    padding: 6rem 3rem;
  }
}

/* Geeft alle elementen in de profile card een kleine animatie na het inladen */
h1,
.bio,
.profile-picture,
.tech-logo {
  transition: transform 0.5s ease;
}

h1 {
  transform: translateY(0);
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--primary-accent-color);
  transition-delay: 0.1s;

  @starting-style {
    transform: translateY(-1rem);
  }
}

.bio {
  width: 220px;
  transform: translateY(0);
  font-size: 1rem;
  text-align: center;
  color: var(--secondary-accent-color);

  @starting-style {
    transform: translateY(-1rem);
  }

  @media (min-width: 336px) {
    width: 239px;
  }

  @media (min-width: 1024px) {
    width: 359px;
    font-size: 1.5rem;
    text-align: left;
  }

  span {
    color: var(--primary-accent-color);
  }
}

.profile-picture {
  width: 220px;
  transform: scale(1);
  border-radius: 1rem;

  @starting-style {
    transform: scale(0.9);
  }

  /* Zet de profile picture aan de rechterkant */
  @media (min-width: 1024px) {
    grid-area: 1 / 2 / 4 / 3;
    width: 300px;
    margin-left: auto;
  }
}

.tech-stack {
  display: flex;
  gap: 1rem;
  list-style-type: none;

  .tech-logo {
    height: 43px;
    aspect-ratio: 1;

    @starting-style {
      transform: translateY(1rem);
    }

    @media (min-width: 1024px) {
      height: 65px;
    }

    path {
      transition: fill 0.1s ease;
    }

    /* De fallback variabele wordt gebruikt als er niet gehovert wordt */
    path:nth-of-type(1) {
      fill: var(--logo-background-color, var(--primary-accent-color));
    }

    path:nth-of-type(2) {
      fill: var(--logo-text-color, var(--secondary-background-color));
    }

    .html-logo:hover {
      --logo-background-color: oklch(62.48% 0.194 35.07);
      --logo-text-color: oklch(100% 0 0);
      /* Geeft de glow aan de logo's */
      filter: drop-shadow(0 0 8px oklch(62.48% 0.194 35.07));
    }

    .css-logo:hover {
      --logo-background-color: oklch(44.03% 0.1603 303.37);
      --logo-text-color: oklch(100% 0 0);
      filter: drop-shadow(0 0 8px oklch(44.03% 0.1603 303.37));
    }

    .js-logo:hover {
      --logo-background-color: oklch(96.8% 0.211 109.77);
      --logo-text-color: oklch(0% 0 0);
      filter: drop-shadow(0 0 8px oklch(96.8% 0.211 109.77));
    }

    .nodejs-logo:hover {
      filter: drop-shadow(0 0 8px oklch(77.08% 0.1995 131.8));

      path {
        fill: oklch(77.08% 0.1995 131.8);
      }
    }
  }
}

/* Vergroot het logo en de logo's ernaast een beetje */
.tech-logo:hover {
  transform: scale(1.1);
}

.tech-logo:hover + li {
  transform: scale(1.05);
}

.tech-logo:has(+ :hover) {
  transform: scale(1.05);
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 10dvh;
  padding: 0 25px;

  @media (min-width: 500px) {
    flex-direction: row;
  }

  .personal-website-link {
    display: flex;
    align-items: center;
    color: var(--primary-accent-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    .external-link-logo {
      height: 1rem;

      path {
        stroke: var(--primary-accent-color);
        fill: none;
      }
    }
  }

  .github-logo {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    height: 50px;
    aspect-ratio: 1;

    path {
      fill: var(--primary-accent-color);
    }

    /* Geeft de gebruiker een kleine feedback als erop wordt geklikt */
    &:active path {
      fill: var(--secondary-accent-color);
    }
  }
}