*, *::before, *::after {
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  src: url("../../../fonts/WorkSans-VariableFont_wght.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: italic;
  src: url("../../../fonts/WorkSans-Italic-VariableFont_wght.woff2") format("woff2");
}

:root {
  background-color: var(--bg);
  color: var(--primary);
  font-family: Arial, sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;

  /* CSS Variables: */
  --bg: oklch(0.99 0.003 325);
  --primary: oklch(0.25 0.01 325);
  --bg-cards: oklch(82.275% 0.10674 230.175);
  --link-color: oklch(48.915% 0.20621 261.704);
}

body {
  margin: 0;
}


header {
  background-color: var(--primary);
  color: var(--bg);
}

.container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-inline-start: -2rem;
}

a {
  margin: 0;
}

nav ul a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-block: 1rem;
  padding-inline: 2rem;
  color: inherit;
  text-decoration: none;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cards {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 75rem;

  li {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 18rem;
    min-width: 18rem;
    max-width: calc(33.3% - 2rem);

    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 .2rem oklch(0 0 0 / .2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background-color: oklch(from var(--bg-cards) l c h / 15%);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 2rem oklch(0 0 0 / .4);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      margin: 0;

      .card-title {
        margin-block: 0;
      }

      /* .card-description {
        font-weight: 500;
      } */

      .card-link {
        position: relative;
        z-index: 1;
        align-self: flex-end;
        color: var(--link-color);
        text-decoration: none;
        font-style: italic;
      }
    }

    .overlay-link {
      position: absolute;
      inset: 0;
      text-indent: 120%;
      overflow: hidden;
      white-space: nowrap;

      &:hover {
        background-color: oklch(from var(--bg-cards) l c h / 8%);
      }
    }

    .card-img-container {
      height: 10rem;
      width: 100%;
      order: -1;

      img {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }
}

.oefening3 {
  max-width: 38em;
  margin-inline: auto;
  padding-inline: 1rem;
  background-color: var(--bg);
  color: var(--primary);
  font-family: "Work Sans", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  scroll-behavior: smooth;

  h3 {
    font-size: 1.2em;
    line-height: 1.3;
    margin-block-start: 3rem;
    margin-block-end: 1rem;

    + p {
      margin-block-start: 0;
    }
  }
  h2 {
    font-size: 1.8em;
    line-height: 1.2;
    margin-block-start: 3rem;
    margin-block-end: 1rem;

    &:has(+ h3) {
      margin-block-end: 0.5rem;
    }
    + p, + h3 {
      margin-block-start: 0;
    }
  }
  h1 {
    font-size: 2.7em;
    line-height: 1.1;
    margin-block-start: 3rem;
    margin-block-end: 1rem;

    + p {
      margin-block-start: 0;
    }
  }
  p {
    margin-block: 1.5rem;
  }

  .metadetails {
    font-style: italic;
  }

  .introduction {
    color: oklch(0% 0 0);
    font-weight: 500;
  }
}

.mylink a {
  color: oklch(52.465% 0.21285 28.968);
  font-weight: 600;

  &:before {
    content: url("./images/deleteicon.png");
    vertical-align: text-top;
    margin-inline-end: .4rem;
  }
}

.mybutton a {
  color: oklch(96.936% 0.01727 140.3);
  background-color: oklch(49.128% 0.1604 140.676);
  padding-block: 1rem;
  padding-inline: 1.5rem;
  margin: 2rem;
  border-radius: 0.4em;
  text-decoration: none;
  font-weight: 600;
}