:root:has(#theme-switcher-option-light:checked) {
  --html-bg-color: #ecf2ff;
  --header-bg: url("../img/cover_kein-no-hitsugi.jpg");
  --nav-bg-color: #cbe7ff;
  --nav-bg-color-hover: #add9ff;
  --text-color: #010052;
  --link-color: #00f;
  --accent-color: #0033ac;

}/*
@media (prefers-color-scheme: dark) {}*/
:root:has(#theme-switcher-option-dark:checked) {
  --html-bg-color: #35243a;
  --header-bg: url("../img/cover_astre-no-ito.jpg");
  --nav-bg-color: #3d0312;
  --nav-bg-color-hover: #5b041b;
  --text-color: #ffe8e8;
  --link-color: #ff3561;
  --accent-color: #ff8da8;
}

html {
  font-size: 14px;
  background: var(--html-bg-color);
}
body {
  max-width: 550px;
  font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
  color: var(--text-color);
}
::-webkit-scrollbar {width: .75rem;}
::-webkit-scrollbar-thumb {background: var(--accent-color);cursor: grab;}
page-hero {
  position: relative;
  header {
    height: 300px;
    background: var(--header-bg);
    background-position: 50% 15%;
    background-size: cover;
  }
  .theme-switcher {
    position: absolute;
    left: .2rem;
    bottom: 1.6rem;
    float: right;
    width: fit-content;
    padding: 0;
    font-size: .8rem;
    border: none;
    input {
      --l: 1.5rem;
      width: var(--l);
      height: var(--l);
      cursor: pointer;
      opacity: .3;
      appearance: none;
      background: var(--bg-color);
      border: 1px solid;
      border-radius: 5px;
      &:hover, &:checked {opacity: 1;}
      &#theme-switcher-option-light {--bg-color: #c9eaff;}
      &#theme-switcher-option-dark {--bg-color: #2e014f;}
    }
    * {transition: all .2s;}
  }
  nav {
    display: flex;
    background: var(--nav-bg-color);
    a {
      flex: 1;
      padding: .1rem 0;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      &:hover {
        background: var(--nav-bg-color-hover);
      }
    }
  }
}
aside {
  h2 {
    padding: 0 .2rem;
    font-size: 1rem;
    background: var(--nav-bg-color);
    border: none;
  }
  ul, ol {padding: 0;font-size: .9rem;}
}
aside, main {
  padding: .5rem .2rem;
}
section {margin-bottom: 1rem;}
article header {
  margin-bottom: 1rem;
  time {font-size: .9rem;}
  span {display: block;font-size: .8rem;}
}
.allPosts {
  padding: 0;
  li {
    margin-bottom: .3rem;
    a {font-size: 1.2em;}
    span {font-size: 1rem;}
    time, .postTags {font-size: .85em;}
    .postTags {display: inline;}
  }
}
.postTags {
  padding: 0;
  li {
    display: inline;
    &::before {content: "#";}
  }
}
.changelog {
  max-height: 100px;
  time {
    float: inline-end;
    font-size: .7em;
    font-weight: normal;
  }
}
footer {padding: .2rem;background: var(--nav-bg-color);}

h1, h2 {
  margin-bottom: .3rem;
  font-weight: normal;
  border-block-end: 1px dashed;
  &:not(:first-of-type) {margin-top: 1rem;}
}
h1 {font-size: 1.5rem;}h2 {font-size: 1.4rem;}
h3 {font-size: 1.3rem;}h4 {font-size: 1.2rem;}
h5 {font-size: 1.15rem;}h6 {font-size: 1.1rem;}
li {list-style-type: "\22B1 \00A0";}

em, i {font-family: 'Times New Roman', Times, serif;font-size: 1.2em;}
strong, b {font-family: Verdana, Tahoma, sans-serif;}
em, i, strong, b, h3, h4, h5, h6 {color: var(--accent-color);}
a {color: var(--link-color);}
time {font-weight: bold;}


@media (width >= 500px) {
body {
  display: grid;
  grid-template-columns: 25% auto;
  grid-template-rows: auto;
}
page-hero {grid-column: 1/3;}
main {order: 2;}
aside {order: 1;}
footer {order: 3;grid-column: 1/3;}
}