html,
body {
  background-color: #333;
  color: #fff;
  overflow: hidden;
  font-family: sans-serif;
}

a {
  color: inherit;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

video,
img {
  position: fixed;
  transform-origin: center;
  transition: all 0.25s;

  /* will be overriden */
  /* top: -50%;
  left: -50%; */
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 1;
}

#container {
  position: fixed;
  top: 50%;
  left: 50%;
  /* background-color: red;
  width: 10px;
  height: 10px; */
  transform-style: preserve-3d;
}

/* img {
  transition: all 0.2s;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  position: absolute;
  transform-style: preserve-3d;
} */
/* transform: perspective(20cm) rotateX(-15deg) rotateY(30deg) */

#debug {
  width: 120px;
  height: 80px;
  background-color: #f083;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;

  transform-origin: 0 0;
  position: absolute;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
}