:root {
  --body-font: Calibri, 'Trebuchet MS', sans-serif;
  --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;
  --scrollbar-thumb: linear-gradient(to right, #d6fbff, var(--bg-gradient-dark) 45%, #6cdaff, #88e3ff, var(--bg-gradient-dark));
}
@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: #00ccff;
  --scrollbar-thumb: linear-gradient(to right, #001ac0, var(--bg-gradient-dark) 45%, #040055, #000c78, var(--bg-gradient-dark));
}

html {
  background-color: var(--html-bg-color);
  background-image: var(--html-bg-gradient), url(../bg/cross-bg.svg), url(../bg/cross-bg.svg);
  background-position: 0 0, 0 0, 20px 45px;
  background-size: 100%, 50px, 50px;
  background-repeat: no-repeat, repeat, repeat;
  background-attachment: fixed;
}
::-webkit-scrollbar {width: .75rem;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {
  cursor: grab;
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
body {
  max-width: 800px;
  font-family: var(--body-font);
  color: var(--text-color);
}
.box {
  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);
  &::after {
    content: "\271A";
    color: var(--link-color);
    float: inline-end;
  }
}
a {color: var(--link-color);&:hover {text-shadow: 1px 0 var(--link-color);}}
.theme-switcher {
  width: fit-content;
  border: 0;
  legend {
    text-align: center;
    text-transform: lowercase;
    font-family: var(--arial-narrow);
    font-size: .8rem;
  }
  input {
    --l: 1rem;
    width: var(--l);
    height: var(--l);
    cursor: pointer;
    opacity: .3;
    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;}
}
#tenshi {display: none;}

@media (width >= 800px) {
body {margin-left: .5rem;}
#tenshi {
  display: initial;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -5;
  width: 100vw;
  height: 100vh;
  background-image: url(/asset/img/tenshi-bg.svg);
  background-position: 97% calc(100% + 50px);
  background-size: auto 100%;
  background-repeat: no-repeat;
  opacity: .95;
}
}