@font-face {
  font-family: "VDub";
  src: local("VDub"), url("/fonts/vdub.ttf");
}
@font-face {
  font-family: "Oxygen-Sans";
  src: local("Oxygen-Sans"), url("/fonts/Oxygen-Sans.ttf");
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
  }
}
html,
body {
  font-family: "Oxygen-Sans";
  font-size: 12pt;
  color: #000;
}
@media (prefers-color-scheme: dark) {
  html,
  body {
    color: #f0f0f0;
  }
}
body > header {
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
  background-color: #bbd9ee;
}
@media (prefers-color-scheme: dark) {
  body > header {
    background-color: hwb(204.7 6.7% 43.3%);
  }
}
body > header > nav a {
  color: #000;
}
@media (prefers-color-scheme: dark) {
  body > header > nav a {
    color: #fff;
  }
}
body > header > nav hr {
  color: #add8e6;
}
body > footer {
  opacity: 0.7;
  background-color: #000;
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  body > footer {
    opacity: 0.9;
    background-color: #000;
    color: #fff;
  }
}
body > main {
  background-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body > main {
    background-color: #000;
  }
}
#logo {
  font-family: "VDub";
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
abbr {
  cursor: help;
}
blockquote {
  border-left: 5px solid #bbd9ee;
  margin-left: 0;
  padding: 0.125rem 0 0.125rem 2.5rem;
}
code {
  padding: 0 0.25em;
  color: #adff2f;
  background-color: #1e1818;
}
kbd {
  font-family: monospace;
  font-size: smaller;
  color: #fff;
  background-color: #a6a6a6;
  padding: 0 4px;
  margin: 2px;
  border-radius: 4px;
  box-shadow: 1px 1px rgba(0,0,0,0.5);
}
.invisible {
  visibility: hidden;
}
.short-text {
  display: none;
}
.hover {
  filter: opacity(0.67);
}
.hover:hover {
  filter: none;
}
@media (max-width: 400px) {
  .short-text {
    display: unset;
  }
  .long-text {
    display: none;
  }
}
.text-primary {
  color: #007bff;
}
a.text-primary:focus,
a.text-primary:hover {
  color: #0062cc;
}
.text-secondary {
  color: #868e96;
}
a.text-secondary:focus,
a.text-secondary:hover {
  color: #6c757d;
}
.text-success {
  color: #28a745;
}
a.text-success:focus,
a.text-success:hover {
  color: #1e7e34;
}
.text-info {
  color: #17a2b8;
}
a.text-info:focus,
a.text-info:hover {
  color: #117a8b;
}
.text-warning {
  color: #ff5107;
}
a.text-warning:focus,
a.text-warning:hover {
  color: #d39e00;
}
.text-danger {
  color: #dc3545;
}
a.text-danger:focus,
a.text-danger:hover {
  color: #bd2130;
}
.text-light {
  color: #f8f9fa;
}
a.text-light:focus,
a.text-light:hover {
  color: #dae0e5;
}
.text-dark {
  color: #343a40;
}
a.text-dark:focus,
a.text-dark:hover {
  color: #1d2124;
}
.text-muted {
  color: #868e96;
}
.info-prefix:before {
  content: "ℹ";
  background: #6495ed;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  color: #fff;
  border-radius: 0.6rem;
  text-align: center;
  vertical-align: middle;
  margin-inline-end: 0.25em;
  font-size: 0.9rem;
}
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 700;
}
.alert-dismissible {
  padding-right: 4rem;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert-primary hr {
  border-top-color: #9fcdff;
}
.alert-primary .alert-link {
  color: #002752;
}
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
.alert-secondary hr {
  border-top-color: #c8cbcf;
}
.alert-secondary .alert-link {
  color: #202326;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-success hr {
  border-top-color: #b1dfbb;
}
.alert-success .alert-link {
  color: #0b2e13;
}
.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
.alert-info hr {
  border-top-color: #abdde5;
}
.alert-info .alert-link {
  color: #062c33;
}
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert-warning hr {
  border-top-color: #ffe8a1;
}
.alert-warning .alert-link {
  color: #533f03;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-danger hr {
  border-top-color: #f1b0b7;
}
.alert-danger .alert-link {
  color: #491217;
}
.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
.alert-light hr {
  border-top-color: #ececf6;
}
.alert-light .alert-link {
  color: #686868;
}
.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}
.alert-dark hr {
  border-top-color: #b9bbbe;
}
.alert-dark .alert-link {
  color: #040505;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #000;
}
@media (prefers-color-scheme: dark) {
  html,
  body {
    color: #f0f0f0;
  }
}
a[id]:target {
  position: relative;
  top: -60px;
}
body > header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 1001;
}
main {
  margin-top: 60px;
  min-height: 100vh;
}
footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  min-height: 60px;
  width: 100%;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  font-size: small;
  text-align: center;
  z-index: 1001;
  background-color: #000;
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  footer {
    background-color: #000;
    color: #fff;
  }
}
@media print {
  footer {
    display: none;
  }
}
.scripting {
  display: none;
}
body > header > #logo {
  margin: 10px;
}
body > header > #logo > a {
  display: flex;
  align-items: center;
}
body > header > #logo > a img {
  height: 40px;
  margin-right: 1rem;
}
body > header > #logo > a .brand {
  font-size: 20pt;
}
body > header > nav {
  width: 100%;
  margin: 10px;
}
body > header > nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body > header > nav > ul > li {
  display: inline-block;
}
body > header > nav li {
  display: block;
}
body > header > nav li a {
  display: block;
  padding: 5px 15px;
}
body > header > nav li:hover {
  background-color: #f5f5f5;
  border-radius: 6px;
  color: #29688a;
}
@media (prefers-color-scheme: dark) {
  body > header > nav li:hover {
    color: #fff;
    background-color: #303030;
  }
}
body > header > nav select {
  font-family: inherit;
  font-size: inherit;
  font-variant: all-small-caps;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 0.5rem;
  background-position: right center;
  padding-inline-end: 1rem;
  min-width: 3rem;
}
body > header > nav .submenu {
  position: relative;
}
body > header > nav .submenu > a {
  cursor: pointer;
}
@media not screen and (max-width: 800px) {
  body > header > nav .submenu > a::after {
    content: "⏷";
  }
  body > header > nav .submenu ul {
    display: none;
    position: absolute;
    right: 0;
    padding: 1rem 0;
    min-width: 160px;
    opacity: 0.95;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    background: #fff;
  }
  body > header > nav .submenu ul li {
    margin: 0 1rem;
  }
  body > header > nav .submenu ul a {
    white-space: nowrap;
  }
  body > header > nav .submenu ul hr {
    width: 100%;
  }
  body > header > nav .submenu:focus-within ul,
  body > header > nav .submenu:focus ul,
  body > header > nav .submenu:hover ul {
    display: block;
  }
}
@media not screen and (max-width: 800px) and (prefers-color-scheme: dark) {
  body > header > nav .submenu ul {
    background: hwb(204.7 13.3% 77.7%);
  }
}
@media screen and (max-width: 800px) {
  body > header > nav * {
    display: none;
  }
  body > header > nav:focus,
  body > header > nav:focus-within > ul {
    display: block;
    float: none;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    background: #fff;
    opacity: 0.95;
    margin: 0;
    box-shadow: -1px 1px 4px rgba(128,128,128,0.5);
  }
  body > header > nav:focus ul,
  body > header > nav:focus-within > ul ul {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  body > header > nav:focus li,
  body > header > nav:focus-within > ul li {
    display: block;
    margin: 0 2rem;
  }
  body > header > nav:focus li.submenu > a,
  body > header > nav:focus-within > ul li.submenu > a {
    cursor: default;
  }
  body > header > nav:focus li.submenu:hover,
  body > header > nav:focus-within > ul li.submenu:hover {
    background-color: inherit;
    color: inherit;
  }
  body > header > nav:focus li.submenu li,
  body > header > nav:focus-within > ul li.submenu li {
    margin-right: 0;
  }
}
@media print {
  body > header > nav {
    display: none;
  }
}
@media screen and (max-width: 800px) and (prefers-color-scheme: dark) {
  body > header > nav:focus,
  body > header > nav:focus-within > ul {
    background: hwb(204.7 13.3% 77.7%);
  }
}
@media screen and (max-width: 800px) and (prefers-color-scheme: dark) {
  body > header > nav:hover {
    background-color: #f00;
    color: #008000;
  }
}
body > header a:hover {
  text-decoration: none;
}
#menu-toggle {
  display: none;
}
@media screen and (max-width: 800px) {
  #menu-toggle {
    display: inline-block;
    float: right;
    margin: 2em 1em;
    width: 3em;
    height: 2.5em;
    border: 1px solid #000;
    border-radius: 4px;
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
}
body > main > section,
body > main > article {
  padding: 0.5rem;
}
@media (min-width: 800px) {
  body > main > section,
  body > main > article {
    padding: 2rem 10rem;
  }
}
body > main {
  font-size: 1.1rem;
  padding-bottom: 60px;
}
body > main a {
  text-decoration: underline;
  text-decoration-color: rgba(0,0,255,0.35);
}
@media (prefers-color-scheme: dark) {
  body > main a {
    text-decoration: none;
    color: #7ce9fb;
  }
}
body > main a:hover {
  color: #00f;
  text-decoration-color: #00f;
}
@media (prefers-color-scheme: dark) {
  body > main a:hover {
    color: #07d3f5;
    text-decoration-color: #07d3f5;
  }
}
body > main img {
  max-width: 100%;
  max-height: 100%;
}
#privacy {
  font-size: 90%;
}
form {
  flex: auto;
}
form fieldset {
  border: 1px solid rgba(173,216,230,0.502);
  border-radius: 4px;
}
form .field {
  display: flex;
  flex-direction: column;
}
form .field label {
  margin-top: 1rem;
  font-weight: bold;
}
form input,
form textarea {
  font-size: 80%;
}
@media (max-width: 600px) {
  form input,
  form textarea {
    font-size: 100%;
  }
}
@media (prefers-color-scheme: dark) {
  form input,
  form textarea {
    color: #f0f0f0;
    background-color: #000;
    border: 1px solid #808080;
    border-radius: 4px;
  }
}
form input[type=button],
.button {
  font-size: 0.9rem;
  border: 1px solid transparent;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 4px;
  text-decoration: none !important;
  text-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
form input[type=button]:hover,
.button:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
form input[type=button]:focus,
.button:focus {
  outline: dotted thin;
  outline-offset: -2px;
}
form input[type=button][disabled],
.button[disabled] {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.65;
}
form input[type=button].primary,
.button.primary {
  background-color: #007bff;
  border-color: #007bff;
}
form input[type=button].primary:hover,
.button.primary:hover {
  background-color: #0069d9;
  border-color: #0069d9;
}
form input[type=button].secondary,
.button.secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}
form input[type=button].secondary:hover,
.button.secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
form input[type=button].success,
.button.success {
  background-color: #28a745;
  border-color: #28a745;
}
form input[type=button].success:hover,
.button.success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}
form input[type=button].info,
.button.info {
  background-color: #17a2b8;
  border-color: #17a2b8;
}
form input[type=button].info:hover,
.button.info:hover {
  background-color: #138496;
  border-color: #117a8b;
}
form input[type=button].warning,
.button.warning {
  background-color: #ffc107;
  border-color: #ffc107;
}
form input[type=button].warning:hover,
.button.warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}
form input[type=button].danger,
.button.danger {
  background-color: #dc3545;
  border-color: #dc3545;
}
form input[type=button].danger:hover,
.button.danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}
form input[type=button].outline,
.button.outline {
  background-color: inherit;
  border-color: #6c757d;
}
form input[type=button].small,
.button.small {
  font-size: small;
  padding: 3px 6px;
}
.dropdown,
.dropup {
  position: relative;
  z-index: 10;
}
.dropdown > *,
.dropup > * {
  display: none;
}
.dropdown a,
.dropup a {
  text-decoration: none;
}
.dropdown a:not(.button),
.dropup a:not(.button) {
  text-align: left;
}
.dropdown:focus-within > *,
.dropup:focus-within > * {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  background: #fff;
  color: #000;
  border: 1px solid;
  padding: 0.5em;
}
.dropdown:focus-within ul,
.dropup:focus-within ul {
  list-style: none;
}
.dropdown:focus-within ul li > *,
.dropup:focus-within ul li > * {
  display: block;
}
.dropdown:focus-within ul li > *:not(.button):hover,
.dropup:focus-within ul li > *:not(.button):hover {
  color: #29688a;
}
.dropdown:after,
.dropup:after {
  display: inline-block;
  content: "";
  border-top: 0.3em solid #fff;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  vertical-align: 0.255em;
}
.dropup:focus-within > * {
  top: unset;
  bottom: 1em;
}
.dropup:after {
  border-top: 0;
  border-bottom: 0.3em solid #fff;
}
.buttonbox {
  display: flex;
}
.buttonbox > input[type=button],
.buttonbox > .button {
  flex-basis: 9em;
  flex-grow: 0;
  margin-right: 1em;
}
.buttonbox > input[type=button]:last-child,
.buttonbox > .button:last-child {
  margin-right: 0;
}
.fullwidth {
  max-width: 100vw;
  overflow-x: auto;
}
table.fullwidth {
  width: 100%;
  border-spacing: 0;
}
table.fullwidth th {
  text-align: left;
}
table.fullwidth td {
  border-top: 1px solid #ddd;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background-color: rgba(255,255,255,0.25);
}
@media (prefers-color-scheme: dark) {
  .modal {
    background-color: rgba(0,0,0,0.75);
  }
}
@media screen and (max-width: 500px) {
  .modal {
    top: 60px;
    bottom: 60px;
  }
}
.modal:target {
  display: block;
  pointer-events: auto;
}
.modal > article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 2rem;
  background: #eaf4fa;
  color: #333;
  box-shadow: #b0b0d7 3px 3px 5px;
  border-radius: 1rem;
  max-height: calc(100vh - 60px * 2 - 2rem);
  overflow-y: auto;
}
@media (prefers-color-scheme: dark) {
  .modal > article {
    background: hwb(202.5 2% 90.8%);
    color: hwb(0 80% 20%);
    box-shadow: hwb(240 15.7% 69%) 3px 3px 5px;
  }
}
@media screen and (max-width: 500px) {
  .modal > article {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: unset;
    padding: 1rem;
    border-radius: unset;
  }
  .modal > article:first-child {
    padding-top: 2em;
  }
}
.modal > article a:not([href ^= "#"]) {
  text-decoration: underline;
  text-decoration-color: rgba(0,0,255,0.35);
}
.modal > article a:not([href ^= "#"]):hover {
  color: #00f;
  text-decoration-color: #00f;
}
.modal a[href="#"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem;
  text-decoration: none;
  color: #aaa;
}
.modal a[href="#"]:hover {
  color: #333;
}
a.reveal {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #00f;
}
aside.reveal {
  display: none;
  padding: 0.5rem;
  border-radius: 2px;
  box-shadow: rgba(0,0,0,0.25) 0 0 2px;
}
aside.reveal:target {
  display: block;
}
aside.reveal a[href="#"] {
  display: inline-block;
  font-size: smaller;
  text-decoration: none;
  color: #aaa;
}
aside.reveal a[href="#"]:hover {
  color: #333;
}
aside.accordion > details {
  border-radius: 2px;
  box-shadow: rgba(0,0,0,0.25) 0 0 2px;
}
aside.accordion > details > * {
  padding: 0.5rem;
}
aside.accordion > details > summary {
  display: block;
  position: relative;
  cursor: pointer;
  list-style: none;
}
aside.accordion > details > summary::-webkit-details-marker {
  display: none;
}
aside.accordion > details > summary:hover {
  background: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
  aside.accordion > details > summary:hover {
    background: #303030;
  }
}
aside.accordion > details > summary:after {
  content: "+";
  position: absolute;
  right: 1rem;
}
aside.accordion > details[open] > summary {
  background: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
  aside.accordion > details[open] > summary {
    background: #303030;
  }
}
aside.accordion > details[open] > summary:after {
  content: "-";
}
.spin {
  display: inline-block;
  animation: spin 1.1s infinite linear;
}
.spin.slow {
  animation: spin 3s infinite linear;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}