html {
  box-sizing: border-box;
  height: 100%;
}

body {
  margin: 0 1rem;
  height: 100%;
  .ignore-margin
  {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

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

*:focus {
    outline: 0;
}

main {
  display: block;
  padding-top: 8vw;
}

.layout {
  min-height: calc(100% - 112px);
  &:after {
    content:"";
    display:block;
  }
}

@media only screen and (min-width: 480px) {
  .layout {
    min-height: calc(100% - 116px);
  }
}

@media only screen and (min-width: $tablet) {
  html {
    // font-size: 2vw;
  }
  body {
    margin: 0 2rem
  }
}

@media only screen and (min-width: $desktop) {
  html {
    font-size: 16px;
  }
  main {
    padding-top: 55px;
  }
}