:root {
  color-scheme: light dark;

  --dark-background-color: hsl(250, 50%, 8%);
  --dark-foreground: hsl(250, 10%, 90%);
  --dark-foreground-dim: hsl(250, 10%, 70%);
  --dark-foreground-dimmer: hsl(250, 10%, 25%);

  --light-background-color: hsl(250, 50%, 92%);
  --light-foreground: hsl(250, 10%, 10%);
  --light-foreground-dim: hsl(250, 10%, 30%);
  --light-foreground-dimmer: hsl(250, 10%, 75%);

  --dark-accent-color: hsl(150, 70%, 50%);
  --dark-strong-color: hsl(50, 70%, 50%);
  --dark-error-color: hsl(50, 70%, 50%);

  --light-accent-color: hsl(230, 70%, 50%);
  --light-strong-color: hsl(210, 70%, 50%);
  --light-error-color: hsl(210, 70%, 50%);

  --font-family-text: "Recursive", sans-serif;
  --font-weight-normal: 500;
  --font-weight-bold: 900;
}

* {
  box-sizing: border-box;
  font-family: var(--font-family-text);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: light-dark(
    var(--light-background-color),
    var(--dark-background-color)
  );
  color: light-dark(var(--light-foreground), var(--dark-foreground));
  font-weight: var(--font-weight-normal);
}

h1, h2, h3, h4, h5 {
  font-weight: var(--font-weight-bold);
}

header {
  padding: 0em 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid
    light-dark(
      var(--light-foreground-dimmer),
      var(--dark-foreground-dimmer)
    );

  font-weight: var(--font-weight-bold);
}

header > h1 {
  font-size: large;
}

header > nav {
  display: flex;
  gap: 1em;
}

footer {
  padding: 0.5em;
  display: flex;
  justify-content: center;
  color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
  font-style: italic;
  font-size: small;
}

section {
  padding: 0.5em 2em;
}

a {
  position: relative;
  text-decoration: none;
  color: light-dark(var(--light-accent-color), var(--dark-accent-color));
}

a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: light-dark(
    var(--light-accent-color),
    var(--dark-accent-color)
  );
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 100ms ease-in-out;
}

a:focus::before, a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}