@media (prefers-reduced-motion: reduce),
       (max-height: 649px), (max-width: 649px) {

/* LAYOUT */

body {
  display: grid;
  grid-template: "menu" 5em "body" 1fr;
  /* height: 100vh; height: 100dvh; */
  /* width:  100vw; width:  100dvw; */
}

#face-menu { grid-area: menu; }
#outer     { grid-area: body; }

#outer {
  position: relative;
  height: 90%;
  width: 90%;
  margin: auto;
}

#outer::after {
  content: ' ';
  position: absolute;
  inset: 0;
  box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
  mix-blend-mode: multiply;
}

/* not really a cube any more. but */
#cube, #cube > section {
  position: absolute;
  inset: 0;
}
#cube > section { overflow: auto; }

@media (prefers-color-scheme: dark) {
  html { --shadow-hsl: 60deg 100% 96%; }
}


/* BACKGROUND FIXES */

@media (max-width: 649px) {
  #cube #hello {
    background-size: auto 80%, auto, auto;
    background-position: bottom -20% right 60%, center, center;
  }
}

@media (max-height: 649px) {
  #cube #hello {
    background-size: auto 80%, auto, auto;
    background-position: bottom right, center, center;
  }
}


@media (max-width: 649px) {
  #cube #activities {
    background-size: auto 30%, auto, auto;
    background-position: bottom left 70%, center, center;
  }
}

#cube #six {
  background-position: bottom left 70%, center, center;
}

@media (max-width: 649px) {
  #cube #six {
    background-size: auto 100%, auto, auto;
    background-position: bottom left 70%, center, center;
  }
}

@media (max-height: 649px) {
  #cube #six {
    background-size: cover;
    background-position: top 15% center;
  }
}


/* TRANSITIONS */

#face-menu :checked + label {
  background: hsl(var(--menu-bg-hsl));
}
#face-menu label {
  transition: background 0.1s ease-in;
}

#cube > section[data-selected=true] {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.1s ease-in;
}

#cube > section[data-selected=false] {
  z-index: -1;
  opacity: 0;
  transition: opacity 0s 0.1s ease-in;
}
/* todo make sure this works ok with screen readers */

}