body {
  background: #141924;
}

.wheel {
  position: absolute;
  width: 350px;
  height: 350px;
  top: calc(25% - 350px/2);
  left: calc(50% - 350px/2);
  border-radius: 50%;
  border: 8px solid white;
  margin: -8px;
  box-shadow: 0 0 6px 6px black;
  overflow: hidden;
}
.wheel:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.4) inset;
  z-index: 1;
}
.wheel .inner {
  width: 100%;
  height: 100%;
  transition: 5s;
}
.wheel .inner .slice {
  position: absolute;
  width: 0;
  height: 0;
  left: 125px;
  top: -5px;
  border-width: 180px 50px 0 50px;
  border-style: solid;
  transform-origin: 50% 100%;
}
.wheel .inner .slice .prize {
  position: relative;
  display: block;
  transform: rotateZ(90deg);
  left: 8px;
  text-align: center;
  font-size: 28px;
  margin-top: -160px;
  margin-left: -15px;
  color: white;
  text-shadow: -1px -1px 0 #585651, 1px -1px 0 #585651, -1px 1px 0 #585651, 1px 1px 0 #585651;
}

.slice:nth-child(1) {
  border-color: #16a085 transparent;
  transform: rotate(0deg);
}

.slice:nth-child(2) {
  border-color: #962bc0 transparent;
  transform: rotate(-30deg);
}

.slice:nth-child(3) {
  border-color: #34495e transparent;
  transform: rotate(-60deg);
}

.slice:nth-child(4) {
  border-color: #d35400 transparent;
  transform: rotate(-90deg);
}

.slice:nth-child(5) {
  border-color: #f39c12 transparent;
  transform: rotate(-120deg);
}

.slice:nth-child(6) {
  border-color: #c02b58 transparent;
  transform: rotate(-150deg);
}

.slice:nth-child(7) {
  border-color: #2980b9 transparent;
  transform: rotate(-180deg);
}

.slice:nth-child(8) {
  border-color: #50c556 transparent;
  transform: rotate(-210deg);
}

.slice:nth-child(9) {
  border-color: #d31313 transparent;
  transform: rotate(-240deg);
}

.slice:nth-child(10) {
  border-color: #800055 transparent;
  transform: rotate(-270deg);
}

.slice:nth-child(11) {
  border-color: #c2b503 transparent;
  transform: rotate(-300deg);
}

.slice:nth-child(12) {
  border-color: #008000 transparent;
  transform: rotate(-330deg);
}

.wheel-outer {
  position: absolute;
  width: 500px;
  height: 500px;
  top: calc(50% - 500px/2);
  left: calc(50% - 500px/2);
  border-radius: 50%;
  box-shadow: 0 0 5px 5px black, 0 0 115px 101px rgba(58, 68, 89, 0.2) inset;
}

#svg-arrow {
  position: absolute;
  top: calc(50% - 235px);
  left: calc(50% - 101px);
  z-index: 1;
}

#svg-dotted {
  position: absolute;
  width: 540px;
  height: 540px;
  top: calc(50% - 540px/2);
  left: calc(50% - 540px/2);
}
#svg-dotted #circle-dotted {
  fill: transparent;
  stroke: #c8c8c8;
  stroke-width: 4;
  stroke-dasharray: 0.1 23;
  stroke-dashoffset: 19.5;
  stroke-linecap: round;
}

button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: calc(50% - 50px/2);
  left: calc(50% - 50px/2);
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: 0 0 5px 2px black;
  z-index: 10;
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 30%, #b3bead 100%);
}
button:active {
  transform: scale(0.9);
}