@font-face {
  font-family: "fantasque";
  src: url("/FantasqueSansMono/FantasqueSansMNerdFont-Regular.woff2");
}

* {
  background-color: #333333;
  color: #dddddd;
  --coloracc: #ccffcc;
  --background-coloracc: #336633;
  --background-color-elt: #222;
  font-family: "fantasque";
}

@media (prefers-color-scheme: light) {
  * {
    background-color: #eeeeee;
    color: #000000;
    --coloracc: #116611;
    --background-coloracc: #ddffdd;
    --background-color-elt: #ddd;
  }
}

body {
  justify-content: center;
  margin: 0;
}

body > * {
  max-width: 60vw;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  margin: 0;
}

header {
  margin: 1rem auto;
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media screen and (width <= 600px) {
  nav {
    flex-direction: column;
  }
}

a {
  text-align: center;
  align-content: center;
  display: block;
  min-width: 10rem;
  min-width: 10rem;
  aspect-ratio: 1;
  text-decoration: none;
  background-color: var(--background-color-elt);
  font-size: 2rem;
}

a > p {
  margin: auto;
}

a:hover {
  background-color: var(--background-coloracc);
}