@import "style/vars";
@import "style/mixins";
@import "style/a";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: $normal-text-color;
  hyphens: auto;
}

::-moz-selection {
  background: $accent-color;
  color: $inverse-text-color;
}
::selection {
  background: $accent-color;
  color: $inverse-text-color;
}

html {
  background-color: $background;
  height: 100%;
}

body {
  @include main-font();
  height: 100%;
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);

  & > main {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

    noscript {
      @include square(100%);
      @include center-children();
    }

    @media (min-width: $breakpoint-width) {
      &::-webkit-scrollbar-track,
      &::-webkit-scrollbar {
        background-color: transparent;
        width: 12px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: $accent-color;
        border-radius: $border-radius;
      }
    }
  }
}

img,
video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: $breakpoint-width) {
  html {
    font-size: 0.8em;
  }
}