.io-docs {
  background-color: rgb(31 41 55);
  color: white;
  font-size: 1.125rem;
  max-width: 960px;
  padding: 1rem 1rem 0;

  @media only screen and (min-width: 700px) {
    padding: 6rem 3rem 0;
  }

  & body {
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    border: none;
    color: white;
    font-family: Georgia, serif;
    text-wrap: balance;
  }

  & h1 {
    font-size: 1.625rem;
    margin-bottom: 1rem;
  }

  & h2 {
    font-size: 1.375rem;
    margin-bottom: 0.8rem;
  }

  & h3 {
    font-size: 1.275rem;
    margin-bottom: 0.7rem;
  }

  & hr {
    border-color: #2e3240;
  }

  & a {
    color: #BAA8FF;
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
      text-decoration: underline;
    }
  }

  & img.dark-bg {
    position: fixed;
    bottom: -20rem;
    left: 0;
    opacity: 0.5;
    z-index: -1;
  }

  & .docs-gradient {
    background: linear-gradient(0deg, rgba(31 41 55 / 1) 0%, rgba(17 17 17 / 1) 100%);
    min-height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  & header {
    background: transparent;
    border: none;

    & h1 {
      display: inline-block;
      font-size: 2rem;
      margin-bottom: 3rem;

      & a {
        align-items: baseline;
        color: white;
        display: flex;
        gap: 0.5rem;
        text-decoration: none;

        &:hover,
        &:active,
        &:focus {
          text-decoration: none;
        }

        & img {
          margin: 0;
        }
      }
    }

    &>p {
      font-size: 1.25rem;
    }

    & form {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      @media only screen and (min-width: 500px) {
        align-items: center;
        flex-direction: row;
      }

      & input[type="search"] {
        background: transparent;
        border-color: rgba(255 255 255 / 0.5);
        color: white;
        flex: 1;
        font-size: 1.125rem;
        margin: 0;
        padding: 0.5rem 1rem;

        &:focus {
          background: white;
          color: #111;
        }
      }

      & button {
        background-color: #2E323E;
        padding: 0.625rem 2rem;

        &:hover,
        &:active,
        &:focus {
          background-color: #262933;
        }
      }
    }
  }

  & main.changelog {
    background-color: white;
    box-shadow: 0 0 1rem black, 0 0 2rem black, 0 0 3rem black;
    color: #040404;
    padding: 1rem 4rem;
    border-radius: 1rem;

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
      color: black;
    }

    & ul {
      list-style: none;
      padding-left: 0;
    }

    & li p {
      display: flex;
      gap: 1rem;
      margin: 0;
    }

    & hr {
      border-color: rgba(0 0 0 / 0.1);
    }
  }

  & .search-results {
    & dd {
      margin-bottom: 1.5rem;

      &::before {
        content: "";
      }

      & mark {
        background-color: #8666ff;
        color: white;
      }
    }
  }

  & footer {
    margin: 6rem 0 3rem;

    @media only screen and (min-width: 400px) {
      text-align: center;
    }

    &>a {
      opacity: 0.5;

      &:hover,
      &:active,
      &:focus {
        opacity: 1;
      }
    }

    & ul {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      list-style: none;
      margin: 0;
      padding: 0;

      @media only screen and (min-width: 400px) {
        align-items: center;
        flex-direction: row;
        justify-content: center;
      }
    }
  }
}