* {
  box-sizing: border-box;
}

html {
  user-select: none;
  overflow: hidden;
}
html body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}

h1 {
  position: absolute;
  top: 30%;
  color: #000;
  padding: 0 1rem;
  text-align: center;
  width: 100%;
}

.wheel {
  --x: 0px;
  --y: 0px;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  transform-origin: 0% 0%;
}
.wheel.on .arc {
  opacity: 0.8;
  transform: scale(1) rotate(var(--rotation)) !important;
  transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1.5);
}
.wheel a {
  opacity: 0;
}
.wheel .arc {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  background-image: radial-gradient(circle at 0% 100%, transparent, transparent 29.5%, var(--color-border) 30%, var(--color-border) 30.5%, var(--color) 31%, var(--color) 50%, var(--color-border) 50.25%, var(--color-border) 51.5%, transparent 51.75%, transparent);
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, -0.4, 0.7, -0.3);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  opacity: 0;
  transform: scale(0) rotate(var(--rotation));
}
.wheel .arc i {
  position: absolute;
  bottom: 34%;
  left: 34%;
  font-size: 2rem;
  transform: rotate(calc(var(--rotation) * -1));
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}
.wheel[data-chosen="1"] .arc:nth-child(1) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="1"] .arc:nth-child(1) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(1) {
  --rotation: -45deg;
  --color: hsl(0deg, 36%, 60%);
  --color-border: hsl(0deg, 36%, 40%);
  transition-delay: 0.015s;
}
.wheel[data-chosen="2"] .arc:nth-child(2) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="2"] .arc:nth-child(2) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(2) {
  --rotation: 45deg;
  --color: hsl(90deg, 36%, 60%);
  --color-border: hsl(90deg, 36%, 40%);
  transition-delay: 0s;
}
.wheel[data-chosen="3"] .arc:nth-child(3) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="3"] .arc:nth-child(3) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(3) {
  --rotation: 135deg;
  --color: hsl(180deg, 36%, 60%);
  --color-border: hsl(180deg, 36%, 40%);
  transition-delay: 0.015s;
}
.wheel[data-chosen="4"] .arc:nth-child(4) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="4"] .arc:nth-child(4) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(4) {
  --rotation: 225deg;
  --color: hsl(270deg, 36%, 60%);
  --color-border: hsl(270deg, 36%, 40%);
  transition-delay: 0s;
}

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