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

:root {
  --side: 0px;
  --half: 0px;
  --nhalf: 0px;
}

@layer outer {
  body {
    display: grid;
    grid-template: "menu" 5em "body" 1fr;
  }

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

  #outer {
    grid-area: body;
    position: relative;
    height: 90%;
    width: 90%;
    margin: auto;

    &::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 */
@layer cube {
  #cube, #cube > section {
    position: absolute;
    inset: 0;
  }
  #cube > section { overflow: auto; }

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

/* BACKGROUND FIXES */

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

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

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

  @layer six {
    #six {
      background-position: bottom left 70%, center, center;

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

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


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

  #cube > section {
    &[data-state=entering] {
      z-index: 1;
      opacity: 0;
    }

    &[data-state=active] {
      z-index: 1;
      opacity: 1;
      transition: opacity 0.1s ease-in;
    }

    &[data-state=leaving] {
      z-index: -1;
      opacity: 0;
      transition: opacity 0s 0.1s ease-in;
    }

    &[data-state=hidden] {
      display: none;
    }
  }
}