@font-face {
  font-family: "Lexend Deca";
  src: url("/assets/fonts/Lexend Deca/Variable.ttf");
}
@font-face {
  font-family: "Minecraft";
  src: url("/assets/fonts/Minecraft/Regular.otf");
}
@font-face {
  font-family: "Renogare";
  src: url("/assets/fonts/Renogare/Regular.otf");
}
@font-face {
  font-family: "NDS12";
  src: url("/assets/fonts/NDS12/Regular.otf");
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/fonts/OpenDyslexic/Regular.otf");
}
:root {
  --header-font-family: "Renogare";
  --header-font-weight: 400;
  --font-family: "Lexend Deca";
  --border-width: calc(2rem / 16);
  --base-color: 320, 50%;
  --border-radius: calc(4rem / 16);
}

#accessibility {
  /* position: sticky;
  bottom: 1em;
  left: 1em; */
  padding: 0.5em;
}

#accessibility fieldset {
  margin-block: 0;
}

/* * {
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
} */

.nav {
  max-width: 38em;
  margin: auto;
}

.nav p {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

.nav p * {
  text-align: center;
}

html.base .nav {
  margin: 0;
}

html.base .nav p * {
  text-align: start;
}

h1 {
  border-bottom: var(--border-width) var(--border-style) var(--border-color);
  padding-bottom: 0em;
}
h2 {
  border-bottom: var(--border-width) var(--border-style) var(--border-color);
  padding-bottom: 0.25em;
}

h1 a,
h2 a {
  text-decoration: none !important;
}

.rs {
  float: inline-end;
}

html:not(.base) {
  background: url("/assets/bg.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
html:not(.base) body {
  backdrop-filter: blur(8px);
  /* --background-color: hsla(var(--base-color), 80%, 0.9); */
}

:root {
  --background-color: hsla(var(--base-color), 15%, 0.9);
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: hsla(var(--base-color), 80%, 0.9);
  }
}