*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  /* color-scheme: light dark; */

  --base-100: oklch(37% 0.146 265.522);
  --base-200: oklch(28% 0.091 267.935);
  --base-300: oklch(22% 0.091 267.935);

  --primary: oklch(85.661% 0.144 198.645);
  --secondary: oklch(60.682% 0.108 309.782);
  --accent: oklch(93.426% 0.102 94.555);
  --neutral: oklch(27% 0.146 265.522);

  --text-light: oklch(95% 0 0);
  --text-dark: oklch(10% 0 0);

  --text-size: 1.25rem;
  line-height: 1.6;

  font-family: Rubik;
  text-align: left;
  font-size: var(--text-size);

}

body {
  background-color: var(--base-200);
  color: var(--text-light);

  padding: 0;
  margin: 0;
  min-height: 100vh;
}

header,
footer {
  background-color: var(--base-300);
}

main {
  padding-block: 1.9rem;
}

footer p {
  margin-block-end: 0rem;
}

section {
  background-color: var(--base-300);
  padding-inline: 1.3rem;
  padding-block: 1.5rem;

  margin-block-end: 2rem;

  .content {
    padding-block-end: 1.7rem;
  }
}

/* Typography */
h1+p,
h2+p,
h3+p {
  margin-block-start: calc(var(--text-size) / 2);

}

h2+ul {
  margin-block-start: calc(var(--text-size) * 2);
}

header {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding-block-end: 0.3rem;

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  img {
    margin-block-start: 1rem;
  }
}


.container {
  max-width: 90rem;
  padding-inline: 2rem;
  margin: auto;
}

.cards {
  padding: 0;
  margin: 0;

  li {
    margin-block-end: 1rem;
    list-style: none;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    background-color: var(--base-100);
    color: var(--text-dark);

    h3 {
      font-size: 1.5rem;
      margin-block-start: 0rem;
    }

    a {
      display: block;
      color: inherit;
      text-align: right;
    }

    div {
      padding-inline: 1rem;
    }

    img {
      order: -1;
    }
  }

  .overlay-link {
    position: absolute;
    inset: 0;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}


.intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;

  font-weight: 500;
  font-size: calc(var(--text-size * 0.2));

  picture {
    order: -1;

    img {
      width: 100%;
      border-radius: 1rem;
      padding: 0.5rem;
    }
  }

  ul li>a {
    color: inherit;
  }
}

.button-primary {
  display: block;
  padding-inline: 1.3rem;
  padding-block: 1rem;
  border: 1px solid var(--neutral);
  border-radius: 0.75rem;
  background-color: var(--primary);

  text-decoration: none;
  text-align: center;

}