@charset "UTF-8";

:root {
  --vh: 1vh;
  --scale: 1;
  --base-w: 360;
  --base-h: 800;
}

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 360 / 800;
}

.content {
  z-index:10;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center;
  /** transition: transform 0.2s ease; **/
  /** border: solid; **/
  transform: scale(var(--scale));
  min-width: calc(var(--base-w) * 1px);
  min-height: calc(var(--base-h) * 1px);
  max-width: calc(var(--base-w) * 1px);
  max-height: calc(var(--base-h) * 1px);
  width: calc(var(--base-w) * 1px);
  height: calc(var(--base-h) * 1px);
  overflow: hidden;
  transition: opacity 0.2s;
}

.content.rotating {
  opacity: 0;
}