@font-face {
  font-family: 'arial-narrow', serif;
  src: url(/asset/other/arialnarrow.ttf);
  font-stretch: extra-condensed;
  font-width: extra-condensed;
}
:root {
  --arial-narrow: 'Arial Narrow', 'arial-narrow', Arial, Helvetica, sans-serif;
  --bg-gradient: linear-gradient(to right, var(--bg-gradient-dark), var(--bg-gradient-main) 60%, transparent) ;
}
:root:has(#theme-switcher-option-light:checked) {
  color-scheme: light;
  --html-bg-color: #fff;
  --html-bg-gradient: linear-gradient(to right, #fff 5%, rgba(255,255,255,.90) 700px, transparent);
  --bg-gradient-dark: #98ecff;
  --bg-gradient-main: #cbf5ff;
  --text-color: #05008f;
  --link-color: #0b44ff;
}
@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  --html-bg-color: #000;
  --html-bg-gradient: linear-gradient(to right, #000 5%, rgba(0,0,0,.90) 700px, transparent);
  --bg-gradient-dark: #001391;
  --bg-gradient-main: #0016a2;
  --text-color: #d6fbff;
  --link-color: #00d9ff;
}
}
:root:has(#theme-switcher-option-dark:checked) {
  color-scheme: dark;
  --html-bg-color: #000;
  --html-bg-gradient: linear-gradient(to right, #000 5%, rgba(0,0,0,.90) 700px, transparent);
  --bg-gradient-dark: #001391;
  --bg-gradient-main: #0016a2;
  --text-color: #d6fbff;
  --link-color: #00d9ff;
}

html {
  background-color: var(--html-bg-color);
  background-image: var(--html-bg-gradient), url(/asset/img/cross.svg), url(/asset/img/cross.svg);
  background-position: 0 0, 0 0, 20px 45px;
  background-size: 100%, 50px, 50px;
  background-repeat: no-repeat, repeat, repeat;
  background-attachment: fixed;
}
body {
  max-width: 800px;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  color: var(--text-color);
}
.box {
  overflow: auto;
  padding: .2rem .5rem;
  background: var(--bg-gradient);
}
h1, h2, h3, h4 {
  margin-bottom: .3rem;
  padding-bottom: .05rem;
  text-align: initial;
  font-family: var(--arial-narrow);
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: .2rem;
  border-bottom: 2px dotted var(--link-color);
}
header {background: var(--bg-gradient);}
a {color: var(--link-color);&:hover {font-weight: bold;}}
.theme-switcher {
    border: 0;
    legend {
      text-transform: lowercase;
      text-align: center;
      font-family: var(--arial-narrow);
      font-size: .8rem;
    }
    input {
      --l: 1rem;
      width: var(--l);
      height: var(--l);
      cursor: pointer;
      opacity: .4;
      appearance: none;
      border-radius: 35%;
      corner-shape: notch;
      outline: 2px solid var(--bg-color);
      outline-offset: 2px;
      background: var(--bg-color);
      &:hover, &:checked {opacity: 1;}
      &#theme-switcher-option-light {
        --bg-color: #8ff9ff;
        margin-right: .8rem;
        &:checked {--bg-color: #fff;}
      }
      &#theme-switcher-option-dark {
        --bg-color: #0021dc;
        &:checked {--bg-color: #00076e;}
      }
    }
    * {transition: all .2s;}
}
@media (width >= 800px) {
body {margin-left: .5rem;}
}