html {
  font-family: Roboto, sans-serif;
}
* {
  box-sizing: border-box;
}
@media (prefers-color-scheme: light) {
  :root {
    --bgcolor: rgba(232, 232, 232, 96%);
    --bold: rgba(232, 232, 232, 96%);
    --textcolor: #000;
    --border: rgba(52, 52, 52, 96%);
    --linkcolor: #00e;
    --visitedcolor: #551a8b;
    --h3-select: #0e7eea;
  }
}
:root.light {
  --bgcolor: rgba(232, 232, 232, 96%);
  --bold: rgba(232, 232, 232, 96%);
  --textcolor: #000;
  --border: rgba(52, 52, 52, 96%);
  --linkcolor: #00e;
  --visitedcolor: #551a8b;
  --h3-select: #0e7eea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: rgba(52, 52, 52, 96%);
    --bold: #000;
    --textcolor: #fff;
    --border: rgba(128, 128, 128, 96%);
    --linkcolor: #5bf5bf;
    --visitedcolor: #ae5ee0;
    --h3-select: #8ab4f8;
  }
}
:root.dark {
  --bgcolor: rgba(52, 52, 52, 96%);
  --bold: #000;
  --textcolor: #fff;
  --border: rgba(128, 128, 128, 96%);
  --linkcolor: #5bf5bf;
  --visitedcolor: #ae5ee0;
  --h3-select: #8ab4f8;
}
hr {
  background-color: var(--border);
  height: 2px;
  border: none;
}
body {
  max-width: 85%;
  height: auto;
  margin: auto;
  color: var(--textcolor);
  background-color: var(--bgcolor);
  font-family: Roboto, sans-serif;
}
h1 {
  text-align: center;
  text-shadow: 1px 1px 1px var(--bold);
}
h2 {
  text-align: center;
}
.center {
  width: 100%;
  text-align: center;
  align-content: center;
}
a:link {
  color: var(--linkcolor);
}
a:visited,
a:active {
  color: var(--visitedcolor);
}
