.page.typing-with-dennis {
  display: grid;
  grid-template-columns: 1fr max-content ;
  gap: 50px;
  min-height: 90dvh;
  color: light-dark(var(--color-gray-800), var(--color-gray-200));

  html:has(&) {
    background-image: url('https://wbrowar.us-east-1.linodeobjects.com/static/typing-with-dennis/zebra-print.jpg');
    background-size: cover;
  }

  main {
    display: grid;
    align-items: center;
    justify-content: center;
  }

  #board {
    & > div {
      display: grid;
      align-items: center;
      justify-content: center;
      gap: 50px;
      padding: 30px;
      width: min-content;
    }
  }

  #clue {
    font-family: var(--font-futura);
    font-size: 2rem;
    text-align: center;
  }

  .play-area {
    display: grid;
    gap: 30px;
  }

  #check-mark {
    justify-self: center;
    width: 200px;
    color: oklch(0.876 0.282 139.972);
    transition: transform 6s ease-out;

    &:hover {
      transform: rotate(-2520deg);
    }
  }

  #letters {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: var(--md);

    input {
      --border-color: var(--color-blue);
      appearance: none;
      padding: .6em .5em;
      background-color: light-dark(oklch(0.783 0 89.876 / 0.38), oklch(0.783 0 89.876 / 0.25));
      border: none;
      border-block-end: 7px solid var(--border-color);
      border-radius: 6px;
      text-align: center;
      text-transform: uppercase;
      box-sizing: content-box;
      font-size: 2rem;
      width: 2ch;
      transition: border-color .6s ease-out;

      &[data-correct="true"] {
        --border-color: oklch(0.876 0.282 139.972);
      }
      &[data-correct="false"] {
        --border-color: oklch(0.643 0.244 32.015);
      }
    }
  }

  #next {
    padding: .4em 1.7em;
    justify-self: center;
    background-color: oklch(0.636 0.25 28.294);
    border: 1px solid oklch(0.589 0.23 28.183 / 0.8);
    border-radius: 6px;
    font-family: var(--font-futura);
    font-size: 1.4rem;
    text-box: trim-both cap alphabetic;
    color: oklch(1 0 89.876);
    cursor: pointer;

    &:hover {
      background-color: oklch(0.467 0.192 29.234);
    }
    &:disabled {
      opacity: 0;
      cursor: default;
    }
  }

  .previous-words {
    &:has(#solved:empty) {
      display: none;
    }
    li {
      font-size: 1.4rem;
      font-weight: var(--font-light);
    }
  }

  #solved {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: var(--md);
    margin: 0;
    padding: 0;

    li {
      margin: 0;
      list-style: none;
      text-transform: uppercase;
    }
  }

  #dennis {
    display: none;

    img {
      margin: 0 auto;
      outline: 1px solid white;
      outline-offset: -1px;
    }
  }

  .menu-bar {
    --menu-bar-height: 33px;
    position: fixed;
    inset-block-start: 0;
    padding-inline: 10px;
    width: 100%;
    height: var(--menu-bar-height);
    background-color: oklch(1 0 89.876 / 0.9);
    backdrop-filter: blur(8px);
    box-shadow:
        0 0 20px oklch(0 0 0 / 0.1),
        0 3px 6px oklch(0 0 0 / 0.1);

    & > ul {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: .6em;
      margin: 0;
      padding: 0 .6em;

      & > li {
        margin: 0;
        list-style: none;

        &:has([id="about"]) {
          --anchor-name: about;

          & > div:popover-open {
            display: grid;
            gap: 1.3em;
            padding: 1.5em;
            max-width: 500px;

            a {
              color: oklch(0.636 0.25 28.294);

              &:hover {
                color: oklch(0.467 0.192 29.234);
              }
            }
          }
        }
        &:has([id="menu"]) {
          --anchor-name: menu;

          & > div ul {
            margin: 0;
            padding: 0;

            li {
              margin: 2px;
              list-style: none;

              button {
                padding: 7px 10px;
                border-radius: 3px;
                background-color: light-dark(oklch(0 0 0), oklch(1 0 89.876 / 0.8));
                color: light-dark(oklch(1 0 89.876 / 0.8), oklch(0 0 0));

                &.active {
                  background-color: oklch(0.64 0 89.876);
                  color: oklch(1 0 89.876 / 0.9);
                }
                &:hover {
                  background-color: oklch(0.636 0.25 28.294);
                  color: oklch(1 0 89.876 / 0.9);
                }
              }
            }
          }
        }

        button {
          appearance: none;
          background-color: transparent;
          border: none;
          font-family: monospace;
          color: oklch(0 0 0);
        }
      }
    }

    button:has(+ [popover]) {
      anchor-name: var(--anchor-name);
      height: var(--menu-bar-height);
    }
    [popover] {
      margin: 2px 0;
      position-anchor: var(--anchor-name);
      position: fixed;
      position-area: end span-end;
      height: auto;
      font-family: var(--font-futura);
      border: 1px solid oklch(0.586 0 89.876 / 0.4);
      border-radius: 5px;
      box-shadow:
          0 0 20px oklch(0 0 0 / 0.1),
          0 3px 6px oklch(0 0 0 / 0.1);
    }
  }
}