html {
  font-size: 10px;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.7rem;
  // letter-spacing: -0.06em;
  color: #fff;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  background-color: #191726;
  position: relative;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;

  @include screen(md,max) {
    font-size: 2.2rem;
  }

  &.freezed {
    overflow: hidden;
  }

  @include screen(md, min) {
    &.nav-up {
      &::before {
        top: -30%;
      }

      .header {
        transform: translateY(-105%);
      }
    }

    &.menu-opened {
      &::before {
        top: 0;
      }

      .header {
        transform: none;
      }
    }
  }
}

b,
strong {
  font-weight: 700;
}

button {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.06em;
}

p {
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin: 0;
}

img {
  max-width: 100%;
}

@media all and (min-width: 2200px) {
  html {
    font-size: 13.5px;
  }
}

@media all and (max-width: 600px) and (orientation: portrait),
  all and (max-width: 600px) and (orientation: landscape) {
  html {
    font-size: 9.5px;
  }
}

// @media all and (max-width: 500px) and (orientation: portrait),
//   all and (max-width: 500px) and (orientation: landscape) {
//   html {
//     // font-size: 7.8px;
//   }
// }

// @media all and (max-width: 414px) and (orientation: portrait),
//   all and (max-width: 414px) and (orientation: landscape) {
//   html {
//     // font-size: 7.5px;
//   }
// }

// @media all and (max-width: 375px) and (orientation: portrait),
//   all and (max-width: 375px) and (orientation: landscape) {
//   html {
//     // font-size: 6.35px;
//   }
// }