@charset "UTF-8";

* {
  --rotateX: 45deg;
  --rotateZ: 0deg;
  --swatchSize: 3vh;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: sans-serif;
  font-size: 16px;
}

body {
	background-color: white;
}

#settings {
  position: absolute;
  z-index: 1000;
  padding: 1rem;
  margin: 1rem;
  background-color: gainsboro;
}

.setting {
  margin-bottom: 1rem;
}

input {
  float: right;
}

#scene {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  perspective: 750em;
}

#container {
  position: absolute;
  width: 100vh;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateX(-50vh) translateY(-50vh) rotateX(var(--rotateX)) rotateZ(var(--rotateZ));
  zoom: 0.66;
}

.ring {
  position: absolute;
  width: 100vh;
  height: 100vh;
  border: 1px solid gainsboro;
  border-radius: 50vh;
  pointer-events: none;
}

#top {
  transform: translateZ(50vh);
}

#bottom {
  transform: translateZ(-50vh);
}

.frame {
  position: absolute;
  width: 100vh;
  height: 50vh;
  border: 1px solid gainsboro;
  pointer-events: none;
  top: 25vh;
}

[data-hue-dividers] .frame {
  background-color: white;
}

.frame.hue0::after {
  content: "0";
  display: block;
  /* position: absolute; */
  left: 100%;
  margin-left: 8px;
  bottom: 0;
  background: yellow;
  transform: rotateX(calc(-1 * var(--rotateX))) rotateY(-90deg) rotateZ(calc(-1 * var(--rotateZ)));
}

#upper {
  transform-style: preserve-3d;
  transform: translateZ(25vh);
}

#lower {
  transform-style: preserve-3d;
  transform: translateZ(-25vh);
}

#upper .frame {
  border-bottom: 0;
}

.frame.hue0 {
  transform: rotateX(-90deg) rotateY(90deg);
}

.frame.hue30 {
  transform: rotateX(-90deg) rotateY(120deg);
}

.frame.hue60 {
  transform: rotateX(-90deg) rotateY(150deg);
}

.frame.hue90 {
  transform: rotateX(-90deg) rotateY(180deg);
}

.frame.hue120 {
  transform: rotateX(-90deg) rotateY(210deg);
}

.frame.hue150 {
  transform: rotateX(-90deg) rotateY(240deg);
}

.swatch {
  position: absolute;
  width: var(--swatchSize);
  height: var(--swatchSize);
  border-radius: calc(var(--swatchSize) / 2);
  box-sizing: border-box;
  backface-visibility: hidden;
}

.swatch:hover {
  border: 1px solid white;
  opacity: 1;
}