#main-canvas {
    transition: 0.2s;
    background-color: #242f43;
    position: fixed;
}
.in-game-hud {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.stamina-holder {
    height: 15px;
    width: 200px;
    top: 20px;
    left: 20px;
    position: fixed;
    background: rgb(0,0,0,0.4);
    box-shadow: rgba(0, 0, 0, .2) 0px 4px 12px;
    padding: 6px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.stamina {
    height: 100%;
    width: 100%;
    background: rgb(204, 247, 181, .8);
    border-radius: 4px;
    transition: 0.1s;
}
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

@keyframes screenshake {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

.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 .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, all;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, -0.4, 0.7, -0.3);
  -webkit-clip-path: polygon(0 0, 0 99%, 99% 0);
  clip-path: polygon(0 0, 0 99%, 99% 0);
  opacity: 0;
  transform: scale(0) rotate(var(--rotation));
}
.wheel .arc i {
  position: absolute;
  top: 40%;
  left: 15%;
  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: 0deg;
  --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(45deg, 36%, 60%);
  --color-border: hsl(45deg, 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: 90deg;
  --color: hsl(90deg, 36%, 60%);
  --color-border: hsl(90deg, 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: 135deg;
  --color: hsl(135deg, 36%, 60%);
  --color-border: hsl(135deg, 36%, 40%);
  transition-delay: 0s;
}
.wheel[data-chosen="5"] .arc:nth-child(5) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="5"] .arc:nth-child(5) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(5) {
  --rotation: 180deg;
  --color: hsl(180deg, 36%, 60%);
  --color-border: hsl(180deg, 36%, 40%);
  transition-delay: 0.015s;
}
.wheel[data-chosen="6"] .arc:nth-child(6) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="6"] .arc:nth-child(6) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(6) {
  --rotation: 225deg;
  --color: hsl(225deg, 36%, 60%);
  --color-border: hsl(225deg, 36%, 40%);
  transition-delay: 0s;
}
.wheel[data-chosen="7"] .arc:nth-child(7) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="7"] .arc:nth-child(7) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(7) {
  --rotation: 270deg;
  --color: hsl(270deg, 36%, 60%);
  --color-border: hsl(270deg, 36%, 40%);
  transition-delay: 0.015s;
}
.wheel[data-chosen="8"] .arc:nth-child(8) {
  opacity: 1;
  transform: scale(1.1) rotate(var(--rotation)) !important;
  filter: brightness(150%);
}
.wheel[data-chosen="8"] .arc:nth-child(8) i {
  color: rgba(0, 0, 0, 0.5);
}
.wheel .arc:nth-child(8) {
  --rotation: 315deg;
  --color: hsl(315deg, 36%, 60%);
  --color-border: hsl(315deg, 36%, 40%);
  transition-delay: 0s;
}