body {
  margin: 0;
  background-color: white;
}

.root {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.box {
  position: relative;
  transition: all 0.3s ease-in;
  transform-style: preserve-3d;
  /* perspective: 2000px; */
  perspective-origin: 100% 0%;
  max-width: 600px;
  max-height: 600px;
  width: 100%;
  height: 100%;
}

/* debug-markers - start */

.axis-line {
  position: absolute;
  display: none;
}

.horizontal {
  width: 100%;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  border-bottom: 1px dashed black;
}

.vertical {
  width: 1px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-right: 1px dashed black;
}

/* debug-markers  - end*/

.face {
  position: absolute;
  width: 392px;
  height: 394px;
  top: 0px;
  left: 17.5%;
  backface-visibility: inherit;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

:root {
  --face-incline: 29.839deg;
}

.front {
  background-image: url("./images/obamyd/obama_pyramid_face.png");
  transform: translateZ(98.5px) rotateX(var(--face-incline));
  /* transform: rotateY(90deg) rotateX(var(--face-incline)) rotateZ(0deg) translateX(0px)
    translateY(0px) translateZ(90px); */
}
.back {
  background-image: url("./images/obamyd/obama_pyramid_hair.png");
  transform: translateZ(-98.5px) rotateX(calc(-1 * var(--face-incline)));
  /* transform: rotateY(-90deg) rotateX(var(--face-incline)) rotateZ(0deg) translateX(0px)
    translateY(0px) translateZ(90px); */
}

.right {
  background-image: url("./images/obamyd/obama_pyramid_right_ear.png");
  transform: translateX(-98.5px) rotateY(-270deg)
    rotateX(calc(-1 * var(--face-incline)));
  /* transform: rotateY(180deg) rotateX(-var(--face-incline)) rotateZ(0deg) translateX(0px)
    translateY(0px) translateZ(-90px); */
}

.left {
  background-image: url("./images/obamyd/obama_pyramid_left_ear.png");
  transform: translateX(98.5px) rotateY(-90deg)
    rotateX(calc(-1 * var(--face-incline)));
  /* transform: rotateY(0deg) rotateX(-var(--face-incline)) rotateZ(0deg) translateX(0px)
    translateY(0px) translateZ(-90px); */
}

.bottom {
  background-image: url("./images/obamyd/obama_pyramid_bottom.png");
  transform: translateY(170px) rotateX(90deg);
}

.shadow {
  position: absolute;
  top: 73%;
  left: 50%;
  width: 1px;
  height: 1px;
  background-color: red;
  box-shadow: 0px 0px 240px 240px rgba(0, 0, 0, 0.644);
  animation: shadow 5s infinite linear;
  z-index: -1;
}

@keyframes shadow {
  0% {
    transform: rotateX(90deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(90deg) rotateZ(0);
    /* transform: rotateX(90deg) rotateZ(-360deg); */
  }
  100% {
    transform: rotateX(90deg) rotateZ(0deg);
  }
}

:root {
  --controls-offset-x: 0px;
  --controls-offset-y: 24px;

  --controls-line-height: 24px;
}

.controls {
  margin-left: 4px;
  font-weight: 700;
  font-size: 16px;
}
.root label,
.root input {
  position: absolute;
  font-size: 16px;
  z-index: 2;
}

.root label[for="clockwise"] {
  top: calc(var(--controls-offset-y) + 0px);
  left: 24px;
}
.root input[value="clockwise"] {
  top: calc(var(--controls-offset-y) + 2px);
  left: 0px;
}

.root label[for="counter-clockwise"] {
  top: calc(var(--controls-offset-y) + 24px);
  left: 24px;
}
.root input[value="counter-clockwise"] {
  top: calc(var(--controls-offset-y) + 26px);
  left: 0px;
}

.root label[for="none"] {
  top: calc(var(--controls-offset-y) + 48px);
  left: 24px;
}
.root input[value="none"] {
  position: absolute;
  top: calc(var(--controls-offset-y) + 50px);
  left: 0px;
}

.root input[name="obamyd-setting"]:nth-of-type(1):checked ~ .container .box {
  animation: counter-clockwise 2s infinite linear;
}

.root input[name="obamyd-setting"]:nth-of-type(2):checked ~ .container .box {
  animation: clockwise 2s infinite linear;
}

@keyframes counter-clockwise {
  0% {
    /* transform: rotateY(-10deg) rotate3d(0, 0.5, 0, 0turn); */
    transform: rotateX(-20deg) rotate3d(0, 0.5, 0, 0turn);
  }
  100% {
    /* transform: rotateY(-10deg) rotate3d(0, 0.5, 0, -1turn); */
    transform: rotateX(-20deg) rotate3d(0, 0.5, 0, 1turn);
  }
}

@keyframes clockwise {
  0% {
    /* transform: rotateY(-10deg) rotate3d(0, 0.5, 0, 0turn); */
    transform: rotateX(-20deg) rotate3d(0, 0.5, 0, 0turn);
  }
  100% {
    /* transform: rotateY(-10deg) rotate3d(0, 0.5, 0, -1turn); */
    transform: rotateX(-20deg) rotate3d(0, -0.5, 0, 1turn);
  }
}