@charset "UTF-8";



.Wheelcontainer {
  max-width: 200px;
  min-height: 200px;
  display: block;
  position: absolute;
  left: 135px;
  top: -230px;
  border-radius: 50%;
}


#wheel-of-fortune {
  max-width: 170px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-image: url(../../../images/bg/circleBg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#wheel {
  display: block;
  transform-origin: 50% 50%;
}



#indicator {
  cursor: pointer;
}

#wheel .slice:nth-child(5n+1) {
  fill: #f1f1f1;
}

#wheel .slice:nth-child(5n+2) {
  fill: #f5f5f5
}

#wheel .slice:nth-child(5n+3) {
  fill: #f4f4f4;
}

#wheel .slice:nth-child(5n+4) {
  fill: #f8f8f8;
}

#wheel .slice:nth-child(5n+5) {
  fill: #ededed;
}

#wheel.is-turning {
  animation-name: turning-wheel;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}