html {
  background: var(--color-black);
  font-size: calc(100vw / 1440 * 10);

  @include media('<phone') {
    font-size: calc(100vw / 375 * 10);
  }
}

body {
  font: 1.6rem/1.3 $font-neue-montreal;
  opacity: 0;

  .loaded & {
    opacity: 1;
  }

  @include media('>=desktop') {
    font-size: 16px;
  }
}

::-webkit-scrollbar {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.app {
  border-radius: 0;
  height: 100%;
  top: 0;
  transition: all 1s ease;
  z-index: z('box');

  .navigation--open & {
    background: var(--color-cod-gray);
    border-radius: 1rem;
    height: calc(100% - 7.5rem - 2.5rem);
    pointer-events: none;
    top: 7.5rem;
    transform: translateX(62.5rem);
  }

  @include media('>=desktop') {
    .navigation--open & {
      transform: translateX(625px);
      top: 75px;
      height: calc(100% - 75px - 25px);
    }
  }
}

[data-paragraph] {
  div {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
}

img {
  opacity: 0;
  transition: opacity 1s ease;

  &.loaded {
    opacity: 1;
  }
}
