@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  background-color: var(--background-bg-100) !important;
}

.md-header__inner {
  .md-logo {
    display: flex;
    width: 28px;
    height: 28px;
    margin: auto;
    padding: 0;

    @media screen and (width <= 1220px) {
      display: none;
    }
  }

  .md-header__title {
    margin-left: 12px;
  }
}

.md-container {
  > .md-main {
    .md-sidebar > .md-sidebar__scrollwrap,
    .md-sidebar > .md-sidebar__scrollwrap:hover {
      scrollbar-color: var(--elements-e-300) transparent;
    }

    .md-content {
      margin-bottom: 110px;
    }
  }

  .md-content__inner {
    & h1 {
      margin-bottom: 24px;
      color: var(--primary-colors-almost-black);
      font: var(--open-sans-20-400);
    }

    & h2,
    & p {
      margin: 24px 0 16px;
      color: var(--primary-colors-almost-black);
      font: var(--roboto-15-500);

      & a.button-secondary {
        border: none;
        text-decoration: none;
      }
    }

    & h3 {
      margin-bottom: 0;
      color: var(--primary-colors-almost-black);
      font: var(--roboto-13-500);

      ~ p {
        margin: 0;
        color: var(--primary-colors-almost-black);
        font: var(--roboto-13-400);
      }
    }

    .form-check-input {
      border: 1px solid var(--elements-e-300);
      border-radius: 3px;
      background-color: transparent;
      cursor: pointer;

      &:hover {
        border: 1px solid var(--elements-e-400);
      }

      &:focus {
        border: var(--focused-border);
        box-shadow: none;
      }

      &:checked {
        border-color: var(--topaz-topaz);
        background-color: var(--topaz-topaz);

        &:hover {
          border-color: var(--topaz-hover);
          background-color: var(--topaz-hover);
        }
      }
    }

    .form-check-label {
      margin-bottom: 0;
      color: var(--primary-colors-almost-black);
      font: var(--roboto-13-400);
    }

    > ul, & ol > li {
      color: var(--primary-colors-almost-black);
      font: var(--roboto-13-400);

      & strong {
        font-weight: 500;
      }
    }

    & blockquote {
      & p {
        color: var(--primary-colors-almost-black);
        font: var(--open-sans-20-400);
      }
    }
  }

  .md-footer {
    background-color: transparent;

    .md-footer-meta {
      background-color: transparent;
    }

    .md-footer-meta__inner {
      justify-content: center;
    }

    .md-copyright__highlight {
      color: var(--elements-e-300);
      font: var(--roboto-13-400);
      text-align: center;

      & a {
        color: inherit;

        &:hover,
        &:focus {
          color: var(--elements-e-400);
        }
      }
    }
  }

  .footer__links {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

body.modal-open {
  height: 100vh;
}

:focus-visible {
  outline: none;
}

textarea::-webkit-resizer {
  background: url('icons/resize-icon.svg') no-repeat 3px 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--elements-e-300) !important;
}