:root {

  --bgColor: color-mix(in srgb, Gray 10%, Canvas);
  /* --bgColor: hsl(from Canvas h s 10%); */
  --bgOpacity: 35%;

  /* https://iamkate.com/data/12-bit-rainbow/ */
  --mgn: #817;
  --red: #a35;
  --pch: #c66;
  --orn: #e94;
  --ylw: #ed0;
  --lim: #9d5;
  --grn: #4d8;
  --tqs: #2cb;
  --sky: #0bc;
  --blu: #09c;
  --ind: #36b;
  --prp: #639;
}

* {
  box-sizing: border-box;
}

html {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.show {
  body {
    font-size: 3vw;
    margin: 0;

    > main {
      scroll-snap-type: block mandatory;
      scroll-snap-stop: always;
      overflow-y: scroll;
      height: 100vh;

      > article {
        height: 100vh;
        width: 100%;
        padding-inline: 2.5vh;
        scroll-snap-align: start;

        > h2 {
          height: 15vh;
          line-height: 15vh;
          text-align: center;
          margin: 0;
          &.small-title {
            font-size: 5vh;
            height: 4vh;
            line-height: 8vh;
          }
        }
      }
    }
  }

  article > div {
    background-color: var(--bgColor);
    border-radius: 1rem;
    padding: 1vw 5vw;
    height: 82.5vh;
    > ul > li {
      margin-block: 3rem;
    }
  }
  article > div:has(style) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2.5vw;
    gap: 1rem;
    div {
      border-radius: 1rem;
      padding: 0.5rem 2rem;
      p {
        border-radius: 1rem;
        padding-inline: 1rem;
      }
    }
  }

  iframe {
    position: relative;
    top: 26.5vh;
    left: 25%;
    width: 50%;
    height: 44.75vh;
    scale: 2;
    border-radius: 0.5rem;
  }

  img {
    border-radius: 1rem;
  }

  .right { text-align: right }
  .center { text-align: center }
  .centerblock {
    display: grid;
    place-content: center;
  }
  .relative { position: relative }
  .balance { text-wrap: balance }
  .small { font-size: 0.75em }

  .shadow {
    position: relative;
    top: -1.58lh;
    left: 0.2rem;
    filter: blur(0.1rem) opacity(0.5);
  }
  .comment {
    opacity: 0.35;
    font-style: italic;
  }

  .hide {
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
    @media print, (any-hover: none) {
      opacity: 1;
    }
  }
  .reveal {
    z-index: 0 !important;
    opacity: 1;
    transition: opacity ease-in-out 0.5s;
  }

  .rainbow > *:nth-of-type(12n + 1) { background-color: color-mix(in srgb, var(--mgn) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 2) { background-color: color-mix(in srgb, var(--red) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 3) { background-color: color-mix(in srgb, var(--pch) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 4) { background-color: color-mix(in srgb, var(--orn) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 5) { background-color: color-mix(in srgb, var(--ylw) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 6) { background-color: color-mix(in srgb, var(--lim) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 7) { background-color: color-mix(in srgb, var(--grn) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 8) { background-color: color-mix(in srgb, var(--tqs) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 9) { background-color: color-mix(in srgb, var(--sky) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 10) { background-color: color-mix(in srgb, var(--blu) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 11) { background-color: color-mix(in srgb, var(--ind) var(--bgOpacity), Canvas) }
  .rainbow > *:nth-of-type(12n + 12) { background-color: color-mix(in srgb, var(--prp) var(--bgOpacity), Canvas) }



  .instructions {
    /* display: none; */
    
    text-align: left;
    position: absolute;
    top: 0;
    left: 1em;
    font-size: 0.35em;
  }

  #intro img {
    position: absolute;
    width: 40%;
    bottom: 0;
    right: 0;
  }
  style, pre {
    font-size: 0.75em;
  }

  #ydark img {
    position: absolute;
    width: 28rem;
    bottom: 3rem;
    &:nth-of-type(1) {
      left: 3rem;
    }
    &:nth-of-type(2) {
      right: 3rem;
    }
    &:nth-of-type(3) {
      left: 50%;
      translate: -50%;
      bottom: 1.5rem;
    }
  }

  #ylight img {
    position: absolute;
    &:nth-of-type(1) {
      left: 3rem;
      bottom: 3rem;
      width: 30rem;
    }
    &:nth-of-type(2) {
      top: 3rem;
      right: 3rem;
      width: 40rem;
    }
    &:nth-of-type(3) {
      right: 3rem;
      bottom: 3rem;
      width: 60rem;
    }
    &:nth-of-type(4) {
      top: 3rem;
      left: 10rem;
      width: 50rem;
    }
    &:nth-of-type(5) {
      top: 20rem;
      right: 6rem;
      width: 50rem;
    }
    &:nth-of-type(n+6) {
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 50rem;
    }
  }

  #both p {
    position: absolute;
    font-size: 5vw;
    &:nth-of-type(1) {
      bottom: 3vw;
      left: 60vw;
    }
    &:nth-of-type(2) {
      top: 1vw;
      left: 10vw;
    }
    &:nth-of-type(3) {
      bottom: 0;
      left: 20vw;
    }
    &:nth-of-type(4) {
      top: 0;
      right: 10vw;
    }
  }
  .waviy {
    position: relative;
    font-size: 10vw;
  }
  .waviy span {
    color: var(--rgb, CanvasText);
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    animation: waviy 2s infinite;
    animation-delay: calc(0.1s  * var(--i));
  }
  #both img {
    position: absolute;
    top: 2rem;
    left: 50%;
    translate: -50%;
    width: auto;
  }

  #scope li ul li {
    margin-bottom: 1.5em;
  }

  #other-system img {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
  }

  #themes .default {
    padding-inline: 2.5vw;
    > div {
    border-radius: 1rem;
    margin-block: 1.75rem;
    padding: 0 1.5rem;
    }
    justify-content: space-between;
  }
  #themes .default * {
    font-size: 1.4vw;
    font-family: initial;
    line-height: 1.2;
  }

  style.smallercode {
    font-size: 0.65em;
  }

  .contrast-demo p {
    color: CanvasText;
    background-color: Canvas;
  }

  #choice table {
    width: 100%;
    height: 95%;
    border-spacing: 1rem;
    tr:first-child {
      height: 15%;
    }
    th:first-child {
      width: 15%;
    }
    td {
      font-size: 300%;
      border-radius: 1rem;
      text-align: center;
      vertical-align: middle;
    }
  }

  #further p {
    margin-block: 0.55em;
  }
  #further div {
    padding-inline: 1.25em;
  }
}

.light { color-scheme: light }
.dark { color-scheme: dark }
.lowcontrast { filter: contrast(0.5) }

@keyframes waviy {
  0%, 40%, 100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-3vw)
  }
}

style {
  font-family: monospace;
  display: block;
  white-space: pre-wrap;
}

iframe {
  width: 800px;
  height: 400px;
}

button:is(#show, #mode) {
  position: fixed;
  bottom: 0.5em;
  opacity: 0;
  transition: opacity 0.25s;
  &:hover { opacity: 0.75 }
  &:active { opacity: 1 }
}
button#show {
  left: 0.5em;
}
button#mode {
  right: 1em;
  font-size: 2rem;
}

img {
  max-width: min(100%, 40ch);
}

#themes .default, 
#themes .default > div {
  display: flex;
  gap: 5vw;
}
#themes .default {
  > div {
    color: CanvasText;
    background-color: Canvas;
  }
  > div:first-child {
    color-scheme: light;
  }
  > div:last-child {
    color-scheme: dark;
  }
}

#choice table td {
  color: CanvasText;
  background-color: Canvas;
}

code {
  outline: 0.1em solid #8886;
  background-color: #8882;
  padding: 0em 0.15em 0.1em;
  border-radius: 0.25em;
}