style.css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Roboto Mono", monospace;
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-image: url(./L-1.png);
  background-size: 8px;
  background-position: center;
  color: var(--text-color);
  transition: background-size 800ms;
}
body:has(.container:hover) {
  background-size: 20px;
}

.container {
  width: 240px;
  height: 240px;
  z-index: 999;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(35deg) rotateX(-35deg) rotateZ(0deg);
}
body:has(input#toggle-switch-checkbox:checked) .container {
  animation: rotate-container 6000ms infinite ease-in-out;
}

.main-wrapper {
  position: relative;
  --top-left: 0deg;
  --top-right: 0deg;
  --middle-left: 0deg;
  --middle-right: 0deg;
  --bottom-left: 0deg;
  --bottom-right: 0deg;
}
.main-wrapper .y-top:not(.cube-changer),
.main-wrapper .y-middle:not(.cube-changer),
.main-wrapper .y-bottom:not(.cube-changer) {
  animation: none !important;
}
.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked ~ input[type=checkbox][data-side=top-left]:checked) {
  --top-left: 1800deg;
}

.main-wrapper:has(input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked ~ input[type=checkbox][data-side=top-right]:checked) {
  --top-right: -1800deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked ~ input[type=checkbox][data-side=middle-left]:checked) {
  --middle-left: 1800deg;
}

.main-wrapper:has(input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked ~ input[type=checkbox][data-side=middle-right]:checked) {
  --middle-right: -1800deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -90deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -180deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -270deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -360deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -450deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -540deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -630deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -720deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -810deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -900deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -990deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1080deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1170deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1260deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1350deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1440deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1530deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1620deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1710deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked ~ input[type=checkbox][data-side=bottom-left]:checked) {
  --bottom-left: 1800deg;
}

.main-wrapper:has(input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked ~ input[type=checkbox][data-side=bottom-right]:checked) {
  --bottom-right: -1800deg;
}

.main-wrapper .y-top:not(.cube-changer) {
  transition: rotate 1000ms;
  rotate: y calc(var(--top-left) + var(--top-right)) !important;
}
.main-wrapper .y-middle:not(.cube-changer) {
  transition: rotate 1000ms;
  rotate: y calc(var(--middle-left) + var(--middle-right)) !important;
}
.main-wrapper .y-bottom:not(.cube-changer) {
  transition: rotate 1000ms;
  rotate: y calc(var(--bottom-left) + var(--bottom-right)) !important;
}
.main-wrapper .cube-changer-input {
  display: none;
}
.main-wrapper .cube-changer-input:checked + .cube-changer {
  display: none;
}
.main-wrapper .cube-changer {
  z-index: 10000;
  animation: none !important;
  cursor: pointer;
}
.main-wrapper .cube-changer .face {
  opacity: 0;
}
.main-wrapper .cube-changer .face--back {
  transform: rotateY(180deg) translateZ(200px);
}
.main-wrapper .cube-changer .face--front {
  transform: rotateY(-180deg) translateZ(-40px);
}
.main-wrapper .cube-changer .face--left {
  width: 240px;
  transform: rotateY(-90deg) translateZ(120px) translateX(-80px);
}
.main-wrapper .cube-changer .face--right {
  width: 240px;
  transform: rotateY(90deg) translateZ(-40px) translateX(80px);
}
.main-wrapper .cube-changer .face--bottom {
  height: 240px;
  transform: rotateX(-90deg) translateZ(-40px) translateY(80px);
}
.main-wrapper .cube-changer .face--top {
  height: 240px;
  transform: rotateX(90deg) translateZ(120px) translateY(-80px);
}
.main-wrapper .toggle-switch-container {
  margin-top: 14px;
  padding: 12px;
  background-color: var(--default-bottom-color);
  border: solid 4px;
  border-radius: 9999px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  display: flex;
}
.main-wrapper .toggle-switch-container input {
  display: none;
}
.main-wrapper .toggle-switch-container:has(input:checked) .switch-ball {
  margin-left: 32px;
}
.main-wrapper .toggle-switch-container p {
  font-size: 20px;
  font-weight: 700;
}
.main-wrapper .toggle-switch-container .switch {
  cursor: pointer;
  width: 60px;
  border: solid var(--text-color) 2px;
  background-color: var(--default-bottom-color);
  height: 28px;
  border-radius: 9999px;
}
.main-wrapper .toggle-switch-container .switch .switch-ball {
  border-radius: 9999px;
  background-color: var(--text-color);
  height: 24px;
  width: 24px;
  transition: all 400ms;
}

@keyframes rotate-container {
  0%, 100% {
    transform: rotateY(35deg) rotateX(-35deg) rotateZ(0deg);
  }
  25% {
    transform: rotateY(145deg) rotateX(-180deg) rotateZ(60deg);
  }
  50% {
    transform: rotateY(450deg) rotateX(-300deg) rotateZ(0deg);
  }
  75% {
    transform: rotateY(220deg) rotateX(-100deg) rotateZ(20deg);
  }
}
.cube {
  width: 80px;
  height: 80px;
  position: absolute;
  transform-style: preserve-3d;
}
.cube:not(.cube-changer) {
  pointer-events: none;
}

.face {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: var(--face-opacity, 1);
  border-radius: 8px;
  border: solid black 1px;
  transition: all 700ms;
}
.face--front {
  background: var(--front-color, rgba(0, 0, 0, 0.8));
  transform: rotateY(0deg) translateZ(40px);
}
.face--back {
  background: var(--back-color, rgba(0, 0, 0, 0.8));
  transform: rotateY(180deg) translateZ(40px);
}
.face--left {
  background: var(--left-color, rgba(0, 0, 0, 0.8));
  transform: rotateY(-90deg) translateZ(40px);
}
.face--right {
  background: var(--right-color, rgba(0, 0, 0, 0.8));
  transform: rotateY(90deg) translateZ(40px);
}
.face--top {
  background: var(--top-color, rgba(0, 0, 0, 0.8));
  transform: rotateX(90deg) translateZ(40px);
}
.face--bottom {
  background: var(--bottom-color, rgba(0, 0, 0, 0.8));
  transform: rotateX(-90deg) translateZ(40px);
}

.header {
  position: absolute;
  top: 0px;
  padding: 10px;
}
.header h1 {
  font-size: 4rem;
  font-weight: 700;
}
.header p {
  font-weight: 800;
}
.header a {
  text-decoration: none;
  background-color: var(--text-color);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--background-color);
}
.header a:hover {
  text-decoration: underline;
}

.y-top {
  top: 0px;
}
.y-middle {
  top: 80px;
}
.y-bottom {
  bottom: 0px;
}

.x-left {
  left: 0px;
}
.x-middle {
  left: 80px;
}
.x-right {
  right: 0px;
}

.z-front {
  transform: translate3d(0px, 0px, 0px);
}
.z-middle {
  transform: translate3d(0px, 0px, -80px);
}
.z-back {
  transform: translate3d(0px, 0px, -160px);
}

.y-bottom {
  animation: r-bottom 20000ms forwards infinite;
}
.y-bottom.x-left {
  transform-origin: 120px 0px -80px;
}
.y-bottom.x-middle {
  transform-origin: 40px 0px -80px;
}
.y-bottom.x-right {
  transform-origin: -40px 0px -80px;
}

@keyframes r-bottom {
  0% {
    rotate: y 0deg;
  }
  5% {
    rotate: y 90deg;
  }
  10% {
    rotate: y 180deg;
  }
  15% {
    rotate: y 270deg;
  }
  85% {
    rotate: y 270deg;
  }
  90% {
    rotate: y 180deg;
  }
  95% {
    rotate: y 90deg;
  }
  100% {
    rotate: y 0deg;
  }
}
.y-top {
  animation: r-top 20000ms forwards infinite;
}
.y-top.x-left {
  transform-origin: 120px 0px -80px;
}
.y-top.x-middle {
  transform-origin: 40px 0px -80px;
}
.y-top.x-right {
  transform-origin: -40px 0px -80px;
}

@keyframes r-top {
  0%, 15% {
    rotate: y 0deg;
  }
  20% {
    rotate: y -90deg;
  }
  25% {
    rotate: y -180deg;
  }
  30% {
    rotate: y -270deg;
  }
  70% {
    rotate: y -270deg;
  }
  75% {
    rotate: y -180deg;
  }
  80% {
    rotate: y -90deg;
  }
  85% {
    rotate: y 0deg;
  }
}
.y-middle {
  animation: r-middle 20000ms forwards infinite;
}
.y-middle.x-left {
  transform-origin: 120px 0px -80px;
}
.y-middle.x-middle {
  transform-origin: 40px 0px -80px;
}
.y-middle.x-right {
  transform-origin: -40px 0px -80px;
}

@keyframes r-middle {
  0%, 30% {
    rotate: y 0deg;
  }
  35% {
    rotate: y 90deg;
  }
  40% {
    rotate: y 180deg;
  }
  45% {
    rotate: y 270deg;
  }
  50% {
    rotate: y 360deg;
  }
  55% {
    rotate: y 270deg;
  }
  60% {
    rotate: y 180deg;
  }
  65% {
    rotate: y 90deg;
  }
  70% {
    rotate: y 0deg;
  }
}
.settings {
  max-width: 1200px;
  padding: 20px;
  gap: 40px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.settings h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 10px;
  background-color: var(--background-color);
  margin-bottom: 20px;
  width: max-width;
  display: inline-block;
  padding: 2px 8px;
}
.settings input {
  display: none;
  width: 0px;
  position: absolute;
}
.settings .labels-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.settings .color-display {
  display: flex;
  border: solid 2px black;
  border-radius: 12px;
  overflow: hidden;
  height: 50px;
  cursor: pointer;
  position: relative;
  transition: border-color 200ms;
}
.settings .color-display .color-span {
  flex: 1;
  width: 100%;
}
.settings .color-display:nth-child(1):has(input:checked), .settings .color-display:nth-child(1):hover {
  border-color: #fdf0d5;
}
.settings .color-display:nth-child(1) .color-span:nth-child(2) {
  background-color: #fdf0d5;
}
.settings .color-display:nth-child(1) .color-span:nth-child(3) {
  background-color: #3a86ff;
}
.settings .color-display:nth-child(1) .color-span:nth-child(4) {
  background-color: #8338ec;
}
.settings .color-display:nth-child(1) .color-span:nth-child(5) {
  background-color: #ff006e;
}
.settings .color-display:nth-child(1) .color-span:nth-child(6) {
  background-color: #ffbe0b;
}
.settings .color-display:nth-child(1) .color-span:nth-child(7) {
  background-color: #fb5607;
}
.settings .color-display:nth-child(2):has(input:checked), .settings .color-display:nth-child(2):hover {
  border-color: #f00;
}
.settings .color-display:nth-child(2) .color-span:nth-child(2) {
  background-color: #f00;
}
.settings .color-display:nth-child(2) .color-span:nth-child(3) {
  background-color: #0f0;
}
.settings .color-display:nth-child(2) .color-span:nth-child(4) {
  background-color: #00f;
}
.settings .color-display:nth-child(2) .color-span:nth-child(5) {
  background-color: #ffa500;
}
.settings .color-display:nth-child(2) .color-span:nth-child(6) {
  background-color: #fff;
}
.settings .color-display:nth-child(2) .color-span:nth-child(7) {
  background-color: #ffff00;
}
.settings .color-display:nth-child(3):has(input:checked), .settings .color-display:nth-child(3):hover {
  border-color: #d4c685;
}
.settings .color-display:nth-child(3) .color-span:nth-child(2) {
  background-color: #d4c685;
}
.settings .color-display:nth-child(3) .color-span:nth-child(3) {
  background-color: #f7ef81;
}
.settings .color-display:nth-child(3) .color-span:nth-child(4) {
  background-color: #cfe795;
}
.settings .color-display:nth-child(3) .color-span:nth-child(5) {
  background-color: #a7d3a6;
}
.settings .color-display:nth-child(3) .color-span:nth-child(6) {
  background-color: #99c1b9;
}
.settings .color-display:nth-child(3) .color-span:nth-child(7) {
  background-color: #add2c2;
}
.settings .color-display:nth-child(4):has(input:checked), .settings .color-display:nth-child(4):hover {
  border-color: #059ba8;
}
.settings .color-display:nth-child(4) .color-span:nth-child(2) {
  background-color: #059ba8;
}
.settings .color-display:nth-child(4) .color-span:nth-child(3) {
  background-color: #403692;
}
.settings .color-display:nth-child(4) .color-span:nth-child(4) {
  background-color: #8ac53f;
}
.settings .color-display:nth-child(4) .color-span:nth-child(5) {
  background-color: #455e4e;
}
.settings .color-display:nth-child(4) .color-span:nth-child(6) {
  background-color: #a7a2a9;
}
.settings .color-display:nth-child(4) .color-span:nth-child(7) {
  background-color: #add2c2;
}
.settings .opacity-display {
  padding: 10px;
  text-align: center;
  border: solid 2px black;
  border-radius: 8px;
  cursor: pointer;
  background: var(--background-color);
  transition: all 700ms;
  font-size: 20px;
  letter-spacing: 2px;
}
.settings .opacity-display:has(input:checked) {
  opacity: 0.7;
  border-color: var(--background-color);
}

body:has(#opacity-solid:checked) {
  --face-opacity: 1;
}

body:has(#opacity-see-through:checked) {
  --face-opacity: 0.7;
}

body:has(#opacity-hollow:checked) {
  --face-opacity: 0.3;
}

body,
body:has(#color-1:checked) {
  --text-color: #fdf0d5;
  --background-color: #ff006e;
  background-image: url(./L-1.png);
  --default-front-color: #fdf0d5;
  --default-back-color: #3a86ff;
  --default-left-color: #8338ec;
  --default-right-color: #ff006e;
  --default-top-color: #ffbe0b;
  --default-bottom-color: #fb5607;
}
body .z-front,
body:has(#color-1:checked) .z-front {
  --front-color: #fdf0d5;
}
body .z-back,
body:has(#color-1:checked) .z-back {
  --back-color: #3a86ff;
}
body .x-left,
body:has(#color-1:checked) .x-left {
  --left-color: #8338ec;
}
body .x-right,
body:has(#color-1:checked) .x-right {
  --right-color: #ff006e;
}
body .y-top,
body:has(#color-1:checked) .y-top {
  --top-color: #ffbe0b;
}
body .y-bottom,
body:has(#color-1:checked) .y-bottom {
  --bottom-color: #fb5607;
}

body:has(#color-2:checked) {
  --text-color: #0f0;
  --background-color: #00f;
  background-image: url(./L-2.png);
  --default-front-color: #f00;
  --default-back-color: #0f0;
  --default-left-color: #00f;
  --default-right-color: #ffa500;
  --default-top-color: #fff;
  --default-bottom-color: #ffff00;
}
body:has(#color-2:checked) .z-front {
  --front-color: #f00;
}
body:has(#color-2:checked) .z-back {
  --back-color: #0f0;
}
body:has(#color-2:checked) .x-left {
  --left-color: #00f;
}
body:has(#color-2:checked) .x-right {
  --right-color: #ffa500;
}
body:has(#color-2:checked) .y-top {
  --top-color: #fff;
}
body:has(#color-2:checked) .y-bottom {
  --bottom-color: #ffff00;
}

body:has(#color-3:checked) {
  background-image: url(./L-3.png);
  --text-color: #f7ef81;
  --background-color: #99c1b9;
  --default-front-color: #d4c685;
  --default-back-color: #f7ef81;
  --default-left-color: #cfe795;
  --default-right-color: #a7d3a6;
  --default-top-color: #99c1b9;
  --default-bottom-color: #add2c2;
}
body:has(#color-3:checked) .z-front {
  --front-color: #d4c685;
}
body:has(#color-3:checked) .z-back {
  --back-color: #f7ef81;
}
body:has(#color-3:checked) .x-left {
  --left-color: #cfe795;
}
body:has(#color-3:checked) .x-right {
  --right-color: #a7d3a6;
}
body:has(#color-3:checked) .y-top {
  --top-color: #99c1b9;
}
body:has(#color-3:checked) .y-bottom {
  --bottom-color: #add2c2;
}

body:has(#color-4:checked) {
  --text-color: #fff;
  --background-color: #455e4e;
  background-image: url(./L-4.png);
  --default-front-color: #059ba8;
  --default-back-color: #403692;
  --default-left-color: #8ac53f;
  --default-right-color: #455e4e;
  --default-top-color: #a7a2a9;
  --default-bottom-color: #add2c2;
}
body:has(#color-4:checked) .z-front {
  --front-color: #059ba8;
}
body:has(#color-4:checked) .z-back {
  --back-color: #403692;
}
body:has(#color-4:checked) .x-left {
  --left-color: #8ac53f;
}
body:has(#color-4:checked) .x-right {
  --right-color: #455e4e;
}
body:has(#color-4:checked) .y-top {
  --top-color: #a7a2a9;
}
body:has(#color-4:checked) .y-bottom {
  --bottom-color: #add2c2;
}

/*# sourceMappingURL=style.css.map */