:root {
  color-scheme: dark light;
  --left-alpha: 0deg;
  --left-beta: 0deg;
  --left-gamma: 0deg;
  --right-alpha: 0deg;
  --right-beta: 0deg;
  --right-gamma: 0deg;
  --left-joy-con-color: #00b2dc;
  --right-joy-con-color: #ff493e;
}

html {
  max-width: 75ch;
  padding: 2ch;
  margin: auto;
}

body {
  height: 100%;
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 100%;
}

ol {
  padding-inline-start: 22px;
}

footer {
  position: fixed;
  bottom: 1rem;
  width: 100%;
  font-size: 0.8rem;
}

a {
  color: var(--right-joy-con-color);
}

ul {
  list-style-type: none;
  margin: 0;
}

.joycon.rumble {
  animation: shake 0.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

#debug {
  display: none;
  gap: 50px;
}

#left.highlight,
#right.highlight,
#up.highlight,
#down.highlight,
#capture.highlight,
#minus.highlight,
#joycon-l .highlight {
  outline: solid 2px var(--right-joy-con-color);
}
#l.highlight:after {
  border-left-color: var(--right-joy-con-color);
}

#x.highlight,
#y.highlight,
#a.highlight,
#b.highlight,
#home.highlight,
#plus.highlight,
#joycon-r .highlight {
  outline: solid 2px;
}
#r.highlight:after {
  border-left-color: var(--left-joy-con-color);
}

figure {
  perspective: 1000px;
}

#joycon-l {
  transform-style: preserve-3d;
  transform: rotateZ(var(--left-alpha)) rotateX(var(--left-beta))
    rotateY(var(--left-gamma));
}

#joycon-r {
  transform-style: preserve-3d;
  transform: rotateZ(var(--right-alpha)) rotateX(var(--right-beta))
    rotateY(var(--right-gamma));
}

[data-z] {
  transform: rotateX(15deg) rotateY(-30deg);
}