@mixin hidden {
  display: none !important;
}

@media screen and (max-width: 88.375rem) {
  @mixin remFont {
    font-size: 1rem !important;
  }

  main {
    margin-top: 9.375rem !important;
    margin-bottom: 9.375rem !important;
    width: 90vw !important;
  }

  header nav {
    padding: 0.3125rem 1.25rem !important;

    h1,
    ul li a,
    .fa-brands {
      @include remFont;
    }
  }

  code {
    margin-top: 0.9375rem;
    padding: 0.1875rem 0.625rem;
    line-height: 1.2;
  }

  .danger,
  .warning,
  .tip,
  .details,
  .info {
    width: 100% !important;
  }

  .lang {
    @include hidden;
  }

  .table-of-contents {
    left: 6% !important;
  }
}

@media screen and (max-width: 114.25rem) {
  .table-of-contents {
    @include hidden;
  }
}

@media screen and (max-width: 37.5rem) {
  ul,
  ol {
    margin: 0 0 0 0.625rem;
  }

  aside {
    float: none;
    margin-inline-start: 0;
    width: 100%;
  }
}

@media screen and (min-width: 88.375rem) and (max-width: 118.875rem) {
  main {
    margin: 7% 20%;
  }
}

/* For printing */

@media print {
  @mixin noSpace {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  main {
    @include noSpace;
  }

  nav,
  footer,
  .lang,
  .table-of-contents,
  #helpful-layout {
    @include hidden;
  }
}
