/* styles.css */
body, html {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

.slot {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

/* Assigning background colors and rotation for each slot */
.slot:nth-child(1) { background-color: #FF0000; transform: rotate(0deg) translateX(-50%); }
.slot:nth-child(2) { background-color: #FF7F00; transform: rotate(45deg) translateX(-50%); }
.slot:nth-child(3) { background-color: #FFFF00; transform: rotate(90deg) translateX(-50%); }
.slot:nth-child(4) { background-color: #00FF00; transform: rotate(135deg) translateX(-50%); }
.slot:nth-child(5) { background-color: #0000FF; transform: rotate(180deg) translateX(-50%); }
.slot:nth-child(6) { background-color: #4B0082; transform: rotate(225deg) translateX(-50%); }
.slot:nth-child(7) { background-color: #9400D3; transform: rotate(270deg) translateX(-50%); }
.slot:nth-child(8) { background-color: #2E8B57; transform: rotate(315deg) translateX(-50%); }

.slot::after {
  content: attr(data-number);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-1 * var(--slot-angle));
  transform-origin: center;
  color: white;
  font-size: 20px;
  z-index: 10;
}

/* Arrow styling */
.arrow {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
  position: absolute;
  top: -7.5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Individual transform for each slot's text */
.slot:nth-child(1)::after { --slot-angle: 0deg; }
.slot:nth-child(2)::after { --slot-angle: 45deg; }
.slot:nth-child(3)::after { --slot-angle: 90deg; }
.slot:nth-child(4)::after { --slot-angle: 135deg; }
.slot:nth-child(5)::after { --slot-angle: 180deg; }
.slot:nth-child(6)::after { --slot-angle: 225deg; }
.slot:nth-child(7)::after { --slot-angle: 270deg; }
.slot:nth-child(8)::after { --slot-angle: 315deg; }