@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100;200;300;400&display=swap');

:root {
  --background: #fff;
  --color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --color: #fff;
  }
}


body {
  background-color: var(--background);
  color: var(--color);
  max-width: 80vmin;
  margin: auto;
  font-family: 'Handjet', monospace;
  font-size: 2rem;
  font-weight: 200;
  margin-bottom: 400px;
}

h1 {
  font-size: 6rem;
}

h1, h2 {
  font-weight: 200;
  font-style: italic;
  animation: flip 2s ease-in-out infinite;
}

a {
  font-weight: 300;
  text-decoration: none;
  border: 3px solid transparent;
  width: fit-content;
  color: var(--color);
  font-style: italic;
}
a:hover {
  color: var(--background);
  transition: all 0.5s ease-in-out;
}
a:focus {
  outline: 1px solid var(--color);
}

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

li { 
  margin: auto;
}

li:hover {
  height: 100%;
}

li a {
  display: block;
}

svg {
  fill: currentColor;
  transform-origin: center;
}

text {
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

footer a:hover {
  color: var(--background);
  mix-blend-mode: difference;
  background-color: var(--color);
}