html { height: calc(100svh - var(--offset, 0px)); transition: height 0.1s ease; overscroll-behavior: contain; }
body { background: var(--accent-color); margin: 0; height: 100%; overflow: hidden; overscroll-behavior: contain; }

body { display: grid; padding: var(--xs); padding-top: calc(var(--xs) + env(safe-area-inset-top)); perspective: 500px; }
body > * { grid-area: 1 / 1; }

@media (display-mode: fullscreen) and (orientation: portrait) {
  html { height: calc(100svh - var(--offset, 0px) + env(safe-area-inset-bottom)); }
}

main { border-radius: var(--m); }
aside { background: var(--accent-color); display: flex; justify-content: center; align-items: flex-start; flex-direction: column; row-gap: 1em; font-size: 2em; padding: var(--m); }
aside a { color: white; font-weight: bold; }

main { width: min(800px, calc(100vw - 2 * var(--xs))); }
main { height: 100%; overflow-y: auto; }
main { margin-inline: auto; margin-top: calc(var(--height-header) + env(safe-area-inset-top)); margin-bottom: 0; }
/* main { padding: var(--m) 0; } */
main { padding: 0; }
main { overscroll-behavior: auto; overflow: hidden; }
aside { height: 100%; }

@media only screen and (min-width: 600px) {
   body { padding: var(--m) var(--xs) 0 var(--xs); }
   body:not(.show-menu) main { border-radius: var(--m) var(--m) 0 0; }
   /* main { padding: var(--m) 0 0 0; } */
}

body.show-menu main { transform: scale(0.9) translateX(40ch) rotateY(-3deg); transform: scale(calc((100vw - 10ch) / 100vw)) translateX(40ch) rotateY(-3deg); }
body.show-menu main > * { pointer-events: none; }

body:not(.show-menu) aside > * { transition: opacity 0.3s ease-in-out; }
body:not(.show-menu) aside > * { opacity: 0; pointer-events: none; }

button.menu { position: fixed; top: var(--m); left: var(--m); background-color: rgba(255,255,255,0.7); width: 3em; height: 3em; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 9999; }

/* view transition */
main { view-transition-name: main; }
button.menu { view-transition-name: menu-button; }

::view-transition-group(main) {
  animation-duration: .7s;
}
::view-transition-old(main),
::view-transition-new(main) {
  mix-blend-mode: normal;
  object-fit: cover;
}