:root,
/* Set colours */
:root.light {
  --bgcolor: #ffffff;
  --invert: #000000;
  --fontcolor: #000000;
  --linkcolor: #0000ee;
  --visitedcolor: #551a8b;
  --preformatted: #000000;
  --accent-bg: #aecbfa;
  --accent-fg: #24292f;
  --border: #000000;
  --buttonborder: #222222;
  --construction: #e51c23;
  --code: #000000;
  --shadow: #ffffff;
  --shadow2: #000000;
  --link: #006400;
  --imgshadow: #000000;
  --coc: #000000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: #24292f;
    --invert: #ffffff;
    --fontcolor: #ffffff;
    --linkcolor: #ae5ee0;
    --visitedcolor: #5bf5bf;
    --preformatted: #ffffff;
    --accent-bg: #2b2b2b;
    --accent-fg: #aecbfa;
    --border: #ffffff;
    --buttonborder: #dcdcdc;
    --construction: #fbbc04;
    --code: #fbbc04;
    --shadow: #000000;
    --shadow2: #ffffff;
    --link: #90ee90;
    --imgshadow: #ffffff;
    --coc: #000000;
  }
}
:root.dark {
  --bgcolor: #24292f;
  --invert: #ffffff;
  --fontcolor: #ffffff;
  --linkcolor: #ae5ee0;
  --visitedcolor: #5bf5bf;
  --preformatted: #ffffff;
  --accent-bg: #2b2b2b;
  --accent-fg: #aecbfa;
  --border: #ffffff;
  --buttonborder: #dcdcdc;
  --construction: #fbbc04;
  --code: #fbbc04;
  --shadow: #000000;
  --shadow2: #ffffff;
  --link: #90ee90;
  --imgshadow: #ffffff;
  --coc: #000000;
}
/* Prefer border-box */
* {
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
html {
  font-family: "Roboto", sans-serif;
}
/* General body settings */
body {
  margin: auto;
  max-width: 75em;
  font-family: "Roboto", sans-serif;
  padding: 1rem;
  color: var(--fontcolor);
  background-color: var(--bgcolor);
}
a:link {
  color: var(--linkcolor);
}
b.link {
  color: var(--linkcolor);
}
li.link {
  color: var(--link);
  font-weight: 600;
}
a:visited,a:active {
  color: var(--visitedcolor);
}
hr.line {
  width: 100%;
  border: 1px solid var(--fontcolor);
}
button {
  font-family: inherit;
  box-shadow: 1px 1px 1px 0px var(--buttonborder);
  border: 1px solid var(--border);
  border-radius: 5px;
  float: bottom;
  background-color: #828282;
  color: #ffffff;
}
button:hover {
  background-color: #999999;
}
button:active {
  box-shadow: 1px 1px 1px 0px #222222 inset;
  background-color: #888888;
}
.checkbox {
  font-family: inherit;
  outline: 1px solid #000000;
}
.border {
  border: 1px solid var(--fontcolor);
}
.logo {
  margin-left: 10px;
  margin-bottom: -5px;
}
img.spin {
  transition: all .6s;
}
svg.spin {
  transition: all .6s;
}
img.spin2 {
  transition: all .6s;
}
svg.spin2 {
  transition: all .6s;
}
div.border {
  border: 1px solid var(--fontcolor);
  padding-left: 10px;
  padding-bottom: 8px;
}