.container-roulette{position:relative;min-width:350px;min-height:350px;display:flex;justify-content:center;align-items:center}.shadow{width:100%;height:100%;display:block;right:0;bottom:0;box-shadow:inset 0 .5em 0 rgba(0,0,0,.25)}.container-roulette .circle,.shadow{position:absolute;border-radius:50%;z-index:1}.container-roulette .circle{overflow:hidden;width:60px;height:60px;background-color:white;display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-weight:600;outline:4px solid slategray}.container-roulette .spinBtn{position:absolute;transform:rotate(180deg);top:-4px;margin-right:1px;min-width:25px;min-height:25px;z-index:2;background:white;clip-path:polygon(50% 0,0 100%,100% 100%);width:50px;height:50px}.container-roulette .wheel{overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:white;border-radius:50%;outline:8px solid white;transition:all 5s ease-in-out;border:3px solid slategray}.container-roulette .wheel .number{position:absolute;width:50%;height:50%;background:var(--clr);transform-origin:bottom right;clip-path:polygon(0 0,42.7% 0,100% 100%,0 42.7%);display:flex;justify-content:center;align-items:center}.container-roulette .wheel .number span{position:relative;transform:rotate(45deg);font-weight:600;font-size:2rem;color:white}@media (max-width:1024px){.container-roulette{min-width:300px;max-height:300px;min-height:300px}}@media (max-width:768px){.container-roulette{max-width:350px;min-width:350px;min-height:350px}}@media (max-width:425px){.container-roulette{max-width:250px;min-width:250px;max-height:250px;min-height:250px}.container-roulette .wheel{box-shadow:0 0 0 5px #333,0 0 0 8px #fff,0 0 0 5px #111}}