:root {
  --darkblue: #093754;
  --darkgreen: #0c544c;
}

#cheat-sheet {
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  margin: 0.5rem 0;

  h1 {
    text-align: center;
    font-size: 2rem;
    color: var(--darkgreen);
    font-weight: 800;
    margin-bottom: 1.5rem;
  }


  .item {
    background: white;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(9, 55, 84, 0.15);
    display: flex;
    font-size: 1rem;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(9, 55, 84, 0.08);
    transition: all 0.3s ease;

    p {
      font-size: 1rem;
      margin: 0 8px;
    }

    h3 {
      line-height: 1.2em;
      font-size: 1.1rem;
      margin: 0;
      margin-bottom: .4rem;
      font-weight: 600;
      color: var(--darkblue);
    }


    label {
      display: block;
      margin-top: 10px;
    }

    code {
      color: var(--darkgreen);
      background: #f8fafc;
      font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
      margin-bottom: 0;
      line-height: 1.4rem;
      padding: 10px 12px;
      border-radius: 6px;
      border: 1px solid rgba(9, 55, 84, 0.15);
      font-size: 1rem;
      text-indent: -1.5em;
      padding-left: calc(12px + 1.5em);
    }

    em {
      padding: .2rem .4rem;
      background: var(--darkgreen);
      color: white;
      border-radius: 4px;
      font-weight: 600;
      font-style: normal;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    a em {
      color: white;
      text-decoration: none;
    }

    a:hover em {
      background: var(--darkblue);
      text-decoration: underline;
    }

    h3 code {
      padding: 0;
      background: transparent;
    }

    .or {
      font-weight: 700;
      font-size: 0.8em;
      display: block;
      margin-left: 30px;
      font-family: sans-serif;
    }

    .nobreak {
      white-space: nowrap;
    }
  }

  section {
    margin-bottom: 24px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;

    @media (max-width: 700px) {
      & {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }

    h2 {
      grid-column: 1/3;
      margin-top: 0;
      margin-bottom: 0.8rem;
      font-size: 1.3rem;
      line-height: 1.2;
      color: var(--darkblue);
      font-weight: 700;
      padding-bottom: 6px;
      border-bottom: 2px solid rgba(9, 55, 84, 0.2);
    }

  }
}