:root {
  --size: 500;
}

@media screen and (min-height: 480px) {
  :root {
    --size: 900;
  }
}
@media screen and (min-height: 768px) {
  :root {
    --size: 900;
  }
}
html {
  scroll-padding-top: calc(112 / var(--size) * 100 * var(--vh, 1vh));
}

.app-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

[data-scroll-top] {
  position: fixed;
  right: calc(35 / var(--size) * 100 * var(--vh, 1vh));
  bottom: calc(35 / var(--size) * 100 * var(--vh, 1vh));
  z-index: 100;
  width: calc(80 / var(--size) * 100 * var(--vh, 1vh));
  height: calc(80 / var(--size) * 100 * var(--vh, 1vh));
  border: none;
  border-radius: 50%;
  background: #80d207;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s, background 0.3s;
}
[data-scroll-top].is-visible {
  opacity: 1;
  visibility: visible;
}
[data-scroll-top] img {
  width: calc(34 / var(--size) * 100 * var(--vh, 1vh));
  height: calc(41 / var(--size) * 100 * var(--vh, 1vh));
  transform: rotate(-90deg);
}
@media (hover: hover) and (pointer: fine) {
  [data-scroll-top]:hover {
    background: rgb(99, 192, 0);
  }
}
@media (max-width: 480px) {
  [data-scroll-top] {
    width: calc(55 / var(--size) * 100 * var(--vh, 1vh));
    height: calc(55 / var(--size) * 100 * var(--vh, 1vh));
  }
  [data-scroll-top] img {
    width: calc(20 / var(--size) * 100 * var(--vh, 1vh));
    height: calc(20 / var(--size) * 100 * var(--vh, 1vh));
  }
}

.container {
  max-width: 91vw;
  margin: 0 auto;
}
@media (max-width: 1439px), (min-width: 1440px) and (orientation: portrait) {
  .container {
    max-width: 91vw;
  }
}
@media (max-width: 960px), (min-width: 961px) and (orientation: portrait) {
  .container {
    max-width: calc(100vw - 72 / var(--size) * 100 * var(--vh, 1vh));
  }
}
@media (max-width: 480px) {
  .container {
    max-width: calc(100vw - 36 / var(--size) * 100 * var(--vh, 1vh));
  }
}