:root {
  --background-color: #222222;
  --primary-color: #daff3e;
  --hue: 270;
  --shadow: oklch(25% 0.2 var(--hue));
  --highlight: oklch(98% 0.05 var(--hue));
}

.text-center {
  text-align: center;
}

.hero,
footer {
  text-align: center;
}

footer {
  font-size: 1.25rem;
}

.hero h1 {
  display: inline-block;
  padding: 6px;
  color: white;
  text-shadow: 0 0.04ch 15px var(--highlight), 0 -2px 0 var(--shadow);
  transition: text-shadow 0.3s ease-in;
}
.hero h1:hover {
  text-shadow: 0 0.05ch 8px var(--highlight), 0 -2px 0 var(--shadow);
}
.hero h1 a {
  color: white;
  transition: color 0.3s ease-in-out;
}
.hero h1 a:hover {
  text-decoration: none;
  border-bottom: none;
}

a,
a:visited {
  color: var(--primary-color);
}

button {
  border-radius: 4px;
}
button.primary {
  background-color: var(--primary-color);
  border-color: transparent;
  transition: transform 0.15s ease-in;
}
button.primary:hover {
  border-color: transparent;
  transform: scale(1.02);
}