body {
  background-color: #fff;
  color: #666;
  margin: 0;
  text-align: left;
  font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
  line-height: 1.6em;
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}

body {
  --duration: 0.5s;
   --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}

html>body { font-size: small; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif;
}

h1, h2, h3 {
  font-weight: normal;
}

#front #container {
  margin: 50px;
  width: 70%;
}

#front h2 {
  font-size: 400%;
  color: #333;
  line-height: 1.3em;
  margin: 60px 0 20px 0;
}

@media (prefers-color-scheme: dark) {
  #front h2 {
    color: #ccc;
  }
}


#front h2 a  {
  color: #000;
  text-decoration: none;
  transition: 500ms;
}

#front h2 a:hover  {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  #front h2 a  {
    color: #fff;
  }
}

#front h3 {
  font-size: 200%;
  margin: 1.5em 0;
}

#front h3 a {
  color: #333;
}

@media (prefers-color-scheme: dark) {
  #front h3 a {
    color: #ccc;
  }
}

@media (prefers-color-scheme: dark) {
  a {
    color: #FFFF11;
  }
  a:visited {
    color: #AAE574;
  }
}

.hide {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img {
    filter: invert(100%);
  }
}

.offline-content {
  width: 300px;
}

.offline-content p {
  text-align: center;
}