.mainwheel {
    position: relative;
    width: 500px;
    height: 500px;
}
.wheel {
    width: 100%;
    height: 100%;
    position: relative; 
    border-radius: 50%;
    border: 10px solid #fff;
    overflow: hidden;
    transition: all ease 4s;
}

#croissant {
    width: 50%;
    height: 50%;
    display: inline-block;
    position: absolute;
}

.span1 {
   clip-path: polygon(0 92%, 100% 50%, 0 8%);
   background-color: #ff1f1f;
   top: 120px;
   left: 0;
}
.span2 {
    clip-path: polygon(100% 92%, 0 50%, 100% 8%);
    background-color: #19e3cf; 
    top: 120px;
    right: 0;
 }
.span3 {
    clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
    background-color: #9e0bf3;
    bottom: 0;
    left: 120px;
}
.span4 {
    clip-path: polygon(50% 100%, 92% 0, 8% 0);
    background-color: #15b600;
    top: 0;
    left: 120px;
 }
.span5 {
    clip-path: polygon(0 40%, 100% 0%, 60% 100%);
    background-color: #1f26ff; 
    bottom: -2px; 
    right: 242px;
 }
.span6 {
    clip-path: polygon(40% 100%, 0 0%, 100% 40%);
    background-color: #ff5a5a;
    bottom: -2px;
    left: 242px;
 }
.span7 {
    clip-path: polygon(60% 0, 100% 100%, 0 60%); 
    background-color: #57fff1;
    top: -2px;
    right: 242px; 
 }
.span8 {
    clip-path: polygon(0 100%, 100% 60%, 40% 0);
    background-color: #ff9612;
    top: -2px;
    left: 242px;
}

#croissant a{
     width: 60px;
     height: 65px;
     font-size: 25px;
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
} 
 
.spin {
     position: absolute;
     top: 43%;
     left: 43%;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     border: 2px solid #fff;
     background-color: black;
     color: #fff;
     box-shadow: 0 5px 20px #000;
     font-weight: bold;
     font-size: 22px;
     cursor: pointer;
     animation: pulse 2s infinite;
 }
@keyframes pulse {
    0% {
    transform: scale3d(1, 1, 1);
    }
    50% {
    transform: scale3d(1.09, 1.09, 1.09);
    }
    100% {
    transform: scale3d(1, 1, 1);
    }
  } 
.spin:active {
     width: 70px;
     height: 70px;
     font-size: 20px;
     background: #ffe605;
 }