:root {
  --bg-dark-color: #080808;
  --text-dark-color: #fff;
  --text-dark-subtext-color: #8a8a8a;

  --text-dark-muted: #bcbcbc;

  --text-highlight: #39ff14;

  --text-muted-highlight: #52c63e;
  --seperator: rgba(140, 218, 107, 0.5);

  /* hidden light theme */
  --bg-light-color: #fff;
  --firefox-body-shadow: 0 0 20px #ffffff31, 0 0 20px #00ffab45;
  --firefox-green-shadow: 0 0 20px #08bd994f;
}

* {
  font-family: Pretendard, apple-system, system-ui, "Helvetica", "Arial",
    sans-serif;
}

/* stolen from dimden.dev */

@media screen and (min-width: 601px) {
  @supports (-moz-appearance: none) {
    body {
      text-shadow: var(--firefox-body-shadow) !important;
    }
    h2 {
      text-shadow: var(--firefox-green-shadow) !important;
    }
    a {
      text-shadow: var(--firefox-green-shadow) !important;
    }
  }

  /*
  body:before {
    content: "";
    position: fixed;
    opacity: 0.3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background-image: url(/files/img/overlay.png);
    background-repeat: all;
    background-position: 0 0;
    animation-name: Static;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(4);
    box-shadow: inset 0 0 10em rgb(0 0 0/40%);
  }
  body:after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background-image: url(/files/img/overlay2.png);
    background-repeat: all;
    background-position: 0 0;
    animation-name: Static;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(4);
  }
  */
}

@keyframes Static {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 4px;
  }
}

.header {
  display: flex;
  margin-top: 2rem;
  min-width: 100%;
  align-items: center;
  margin-bottom: 2rem;
}

.title {
  font-size: larger;
  font-weight: bold;
}
.title:hover {
  text-decoration: none;
}

.title {
  --text-highlight: var(--text-dark-color);
}

.nav {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-end;
  gap: 10px;
}

body {
  margin: 0;
  padding: 0 1rem 0rem 1rem;
  min-height: 100vh;
  color: var(--text-dark-color);
  background-color: var(--bg-dark-color);
}

.main {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
}

.main div,
footer {
  flex: 1;
  width: 100%;
  max-width: 105ch;
}

.main footer {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  color: var(--text-dark-subtext-color);
}

.text-muted-highlight {
  color: var(--text-muted-highlight);
  text-decoration: none;
}

a,
.text-highlight {
  color: var(--text-highlight);
  text-decoration: none;
}

.text-normal {
  color: var(--text-dark-color);
}

.text-muted {
  color: var(--text-dark-muted);
}

a:hover {
  text-decoration: underline;
}

ul {
  padding: 1rem;
}