:root {
  --bg: #0b0e13;
  --text: #e8eef7;
  --muted: #9fb3c8;
  --accent: #6aa6ff;

  /* Cube controls */
  --cube-size: min(60vmin, 520px);
  --cube-translate-z: calc(var(--cube-size) / 2);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans, Cantarell, "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, #152033 0%, var(--bg) 60%) fixed;
}

.site-header,
.site-footer {
  text-align: center;
  padding: 1.25rem;
}

.site-header h1 {
  margin: 0.25rem 0 0.25rem;
  font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
}

.site-header p {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  color: var(--muted);
}

.site-footer a {
  color: var(--accent);
}

main {
  display: grid;
  place-items: center;
  padding: 1rem;
}

/* Stage provides perspective */
.stage {
  width: var(--cube-size);
  height: var(--cube-size);
  perspective: calc(var(--cube-size) * 3);
  cursor: grab;
  touch-action: none; /* prevents scrolling while dragging the cube */
}

.stage:active {
  cursor: grabbing;
}

/* The cube container */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -18deg)) rotateY(var(--ry, 24deg));
  transition: transform 120ms ease-out;
  margin-top: 5rem;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #1a2333;
  border: 1px solid #1f2a44;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35) inset, 0 8px 30px rgba(0, 0, 0, .25);
  overflow: hidden;
  pointer-events: none;
  /* allows drag to reach the stage */
  user-select: none;
  -webkit-user-drag: none;
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* allow drag on stage */
}

/* Position each face */
.face--front {
  transform: translateZ(var(--cube-translate-z));
}

.face--back {
  transform: rotateY(180deg) translateZ(var(--cube-translate-z));
}

.face--right {
  transform: rotateY(90deg) translateZ(var(--cube-translate-z));
}

.face--left {
  transform: rotateY(-90deg) translateZ(var(--cube-translate-z));
}

.face--top {
  transform: rotateX(90deg) translateZ(var(--cube-translate-z));
}

.face--bottom {
  transform: rotateX(-90deg) translateZ(var(--cube-translate-z));
}


@media (max-width: 480px) {
  .stage::after {
    bottom: -1.75rem;
    font-size: .8rem;
  }
}