@layer cheats {
  body.light-theme {
    --cheat-fg: #000;
    --cheat-code-bg: #cccccc;
    --cheat-code-example-bg: #dddddd;
    --cheat-entry-border: #999999;
    --cheat-desc-bg: linear-gradient(to right, #eee 0%,#fff 50%);
  }

  body.dark-theme {
    --cheat-fg: #fff;
    --cheat-code-bg: #444444;
    --cheat-code-example-bg: #333333;
    --cheat-entry-border: #777777;
    --cheat-desc-bg: linear-gradient(to right, #222 0%,#000 50%);
  }

  .cheat-sheet {
    display: flex;
    flex-direction: column;
    color: var(--cheat-fg);
    margin-bottom: 0.5rem;

    code {
      font-size: 0.85rem;
      border-radius: 0.2rem;
      background: var(--cheat-code-bg);
      padding: 0.1rem 0.3rem 0.15rem 0.3rem;
    }

    .header {
      display: flex;
      flex-direction: row;
      width: 100%;
      text-align: center;
      font-size: 1.5rem;
      padding: 0.6rem 0.6rem;
      border-bottom: 0.15rem solid;
      border-color: var(--page-fg);
      margin-bottom: 0.75rem;
      justify-content: space-between;
      align-items: center;

      .home-links, .nav-links {
        svg {
          width: 1.5rem;
          height: 1.5rem;
          fill: var(--page-bg);
        }
      }
      .nav-links {
        padding-right: 0.25rem;
      }

      &:hover {
        .home-links {
          svg { fill: var(--page-fg); }
        }
        .nav-links {
          svg { fill: var(--page-fg); }
        }
      }
    }

    @media (min-width: 900px) {
      .header {
        font-size: 2.25rem;

        .home-links, .nav-links {
          svg {
            width: 2.25rem;
            height: 2.25rem;
          }
        }
      }
    }

    @media (min-width: 1280px) {
      .header {
        font-size: 2.5rem;

        .home-links, .nav-links {
          svg {
            width: 2.5rem;
            height: 2.5rem;
          }
        }
      }
    }

    .cheats {
      column-width: 26rem;
      column-gap: 0.65em;
      padding: 0 0.75rem;
    }
    .entry {
      display: flex;
      flex-direction: row;
      align-items: center;
      border: 0.15rem solid;
      border-color: var(--cheat-entry-border);
      border-radius: 0.35rem;
      margin: 0 0 0.35rem 0;
      overflow: hidden;

      .example {
        width: 7.5rem;
        padding: 0.75rem 0;
        text-align: center;

        code {
          background: var(--cheat-code-example-bg);
        }
      }
      .description {
        padding: 0.75rem 0.75rem;
        width: 100%;
        margin: -0.125rem -0.125rem -0.125rem 0;
        background: var(--cheat-desc-bg);
        border: 0.15rem solid;
        border-color: var(--cheat-entry-border);
        border-top-left-radius: 1.2rem;
        border-bottom-left-radius: 1.2rem;
      }
    }
  }
}