*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%

  @include respond(big-desktop) {
    font-size: 75%;
  }
  @include respond(tab-land) {
    font-size: 56.25%;
  }
  @include respond(tab-port) {
    font-size: 50%; //1rem = 8px
  }
  // not needes as it would be the same as tab-port
  // @include respond(phone) {
  //   font-size: 50%;
  // }
}

body {
  padding: 3rem;
  box-sizing: border-box;

  @include respond(tab-port) {
    padding: 0;

  }
}