/* main container */

.game-wheel {
  position: relative;
  overflow: hidden;
}

/* foreground and background images */

.game-wheel-background {
  width: 100%;
  position: absolute;
}

.game-wheel-foreground {
  width: 100%;
  height: auto;
  position: relative;
  bottom: -5px;
  z-index: 10;
}

/* wheel containers */

.game-wheel-wrapper-outer {
  width: 66%;
  max-width: 1200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 8%;
}

.game-wheel-wrapper-inner {
  position: relative;
}

/* wheel parts */

.game-wheel-wheel {
  width: 100%;
  height: 100%;
}

.game-wheel-marker {
  position: absolute;
  top: 0;
  left: 46%;
  z-index: 10;
  width: 8%;
  transform-origin: 50% 25%;
}

.game-wheel-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 14.5%;
  cursor: pointer;
}

/* Animations */

@keyframes Marker {
  0%,
  100% {
    transform: rotate(0deg);
  }
  5%,
  10%,
  15%,
  20%,
  26%,
  32%,
  38%,
  44%,
  50%,
  56%,
  62%,
  68%,
  75%,
  83%,
  95% {
    transform: rotate(-50deg);
  }
  7.5%,
  12.5%,
  17.5%,
  23%,
  29%,
  35%,
  41%,
  47%,
  53%,
  59%,
  65%,
  71%,
  79%,
  88% {
    transform: rotate(-35deg);
  }
}

/* Media queries */

/* Above 1920px (large desktops) */
@media (min-width: 1921px) {
  .game-wheel-wrapper-outer {
    top: auto;
    bottom: 45.5%;
  }
}

/* Below 1200px (landscape tablets) */
@media (max-width: 1200px) {
  .game-wheel-wrapper-outer {
    width: 75%;
  }
}

/* Below 560px (mobile) */
@media (max-width: 560px) {
  .game-wheel-wrapper-outer {
    width: 85%;
    top: 20%;
  }

  .game-wheel-background {
    width: 200%;
    left: -70%;
    top: -3%;
  }

  .game-wheel-foreground {
    width: 200%;
  }
}