:root {
  --body-background: #111;
  --class-background: #333;
  --text-color: #FFFCEB;
  --text-color2: #DDDAB9;
  --hover-color: #FFF;
  --button-background: #559900;
  --color: #FFFCEB
}
@media (prefers-color-scheme: light) {
  :root {
    --body-background: #FFFCEB;
    --class-background: #DDD;
    --text-color: black;
    --text-color2: #222;
    --hover-color: #555;
    --button-background: #99EE00;
    --color: #222
  }
}

.body-bg-prefered-color-scheme {
  background-color: var(--body-background);
}

.background-color-class-prefered-color-scheme {
  background-color: var(--class-background);
}

.background-color-class2-prefered-color-scheme {
  background-color: var(--body-background);
}

.background-color-class-contrast-prefered-color-scheme {
  background-color: var(--body-background);
}

.text-color-prefered-color-scheme {
  color: var(--text-color);
}

.text-color-contrast-prefered-color-scheme {
  color: var(--text-color);
}

.text-color2-prefered-color-scheme {
  color: var(--text-color2);
}

.hover-pcs:focus, .hover-pcs:hover {
  color: var(--hover-color);
}

.button {
  background-color: var(--button-background);
  color: var(--text-color);
}

.color-scheme{
    color: var(--color);
}

@font-face {
  font-family:'Atkinson Hyperlegible';
  src: local("Atkinson Hyperlegible"),
       url("/fonts/AtkinsonHyperlegible-Regular.woff2") format('woff2');
}
@font-face {
  font-family:'Atkinson Hyperlegible';
  src: local("Atkinson Hyperlegible"),
       url("/fonts/AtkinsonHyperlegible-Bold.woff2") format('woff2');
  font-weight: bold;
}
@font-face {
  font-family:'Atkinson Hyperlegible';
  src: local("Atkinson Hyperlegible"),
	url("/fonts/AtkinsonHyperlegible-Italic.woff2") format('woff2');
  font-style: italic;
}
@font-face {
  font-family:'Atkinson Hyperlegible';
  src: local("Atkinson Hyperlegible"),
       url("/fonts/AtkinsonHyperlegible-BoldItalic.woff2") format('woff2');
  font-style: italic;
  font-weight: bold;
}
.atkinson {
  font-family:"Atkinson Hyperlegible", sans-serif;
}