:root {
  /*
   color-scheme: light dark;
  --color: light-dark(hsl(220deg 20% 5%), hsl(220deg 20% 95%));
  --color-link: light-dark(hsl(220deg 80% 65%), hsl(220deg 80% 35%));
  --color-background: light-dark(hsl(from var(--color) h s 90%), hsl(from var(--color) h s 10%));
  --color-background-menu: hsl(from var(--color-background) h s l / 85%);
  --color-background-section: light-dark(hsl(from var(--color) h s 80%), hsl(from var(--color) h s 20%));
  --color-background-content: light-dark(hsl(from var(--color) h s 75%), hsl(from var(--color) h s 25%));
  */

  --color: hsl(220deg 20% 95%);
  --color-link: hsl(190, 50%, 40%);
  --color-background: hsl(15, 25%, 20%);
  --color-background-menu: hsl(from var(--color-background) h s l / 85%);
  --color-background-section: hsl(35, 90%, 30%);
  --color-background-content: hsl(100, 50%, 15%);

}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-family: 'DIN 1451', sans-serif;
  color: var(--color);
  background-color: var(--color-background);
  scroll-padding-top: 2.5rem;
  scroll-behavior: smooth;
  hyphens: auto;

  a {
    text-decoration: none;
    color: var(--color);
  }

  ul {
    list-style: none;
  }

  nav {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: var(--color-background-menu);
    backdrop-filter: blur(0.25rem);

    >input:checked~ul {
      display: flex;
    }

    >input {
      position: fixed;
      appearance: none;

      &:checked~label {
        >i {
          &:first-child {
            display: none;
          }

          &:last-child {
            display: inline;
          }
        }
      }
    }

    >label {
      position: fixed;
      top: 0.5rem;
      left: 0.5rem;
      font-size: 1.5rem;

      >i:last-child {
        display: none;
      }
    }

    h1 {
      font-size: 1.5rem;
      font-weight: 400;
    }

    a {
      display: inline-block;
      padding: 0.5rem 0.25rem;
      width: 100%;
      text-align: center;
    }

    >ul {
      max-width: 80rem;
      flex-wrap: wrap;
      display: none;
      overflow-y: auto;
      max-height: 85vh;

      a:hover {
        background-color: var(--color-link);
        border-radius: 1rem;
      }

      >li {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;

        >ul {
          font-size: 0.75rem;
        }

        @media all and (max-width: 60rem) {
          & {
            flex-basis: 50%;
          }
        }

        @media all and (max-width: 40rem) {
          & {
            flex-basis: 100%;
          }
        }
      }
    }
  }

  main {
    margin-top: 2.75rem;
    padding-left: 0.5rem;

    >section {
      margin-top: 1rem;
      padding-top: 1rem;
      padding-left: 0.5rem;
      background-color: var(--color-background-section);
      border-top-left-radius: 1rem;

      >hgroup {
        margin-bottom: 0.75rem;
        text-align: center;

        >h2 {
          margin-bottom: 0.25rem;
          font-size: 1.25rem;
          font-weight: 400;
        }

        >p {
          font-size: 0.75rem;
        }
      }

      >ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        >li {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 24%;
          padding-top: 1rem;
          padding-left: 0.5rem;
          background-color: var(--color-background-content);
          border-top-left-radius: 1rem;

          >hgroup {
            margin-bottom: 1rem;
            text-align: center;

            >h3 {
              margin-bottom: 0.25rem;
              font-weight: 400;
            }

            >p {
              font-size: 0.75rem;
            }
          }

          >p {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 0.75rem;
          }

          >div {
            overflow: auto;
            white-space: nowrap;
            scroll-snap-type: x mandatory;

            >img {
              width: 100%;
              scroll-snap-align: center;
            }
          }

          @media all and (max-width: 60rem) {
            & {
              flex-basis: 45%;
            }
          }

          @media all and (max-width: 40rem) {
            & {
              flex-basis: 95%;
            }
          }
        }
      }
    }
  }
}