.label{
font-size: 22px;
}
.mainbox {
position: relative;
width: 500px;
height: 500px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 90px;
}
.box {
height: 100%;
border-radius: 50%;
border: 4px solid #104c9a;
overflow: hidden;
transition: all ease-in-out 5s;
transform: rotate(90deg);
}
.span1 {
clip-path: polygon(0 15%, 0% 50%, 50% 50%);
background-color: #8EC5F0;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span2 {
clip-path: polygon(0 15%, 36% 0, 50% 50%);
background-color: #78B9ED;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span3 {
clip-path: polygon(36% 0, 72% 0, 50% 50%);
background-color: #4FABEC;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span4 {
clip-path: polygon(71% 0%, 100% 18%, 50% 50%);
background-color: #3AA8EC;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span5 {
clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
background-color: #339AD7;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span6 {
clip-path: polygon(100% 82%, 100% 50%, 50% 50%);
background-color: #2E8CC2;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span7 {
clip-path: polygon(70% 100%, 100% 82%, 50% 50%);
background-color: #297EB0;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span8 {
clip-path: polygon(22% 150%, 70% 100%, 50% 50%);
background-color: #236389;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span9 {
clip-path: polygon(3% 83%, 36% 100%, 50% 50%);
background-color: #15415A;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span10 {
clip-path: polygon(0% 50%, 0% 89%, 50% 50%);
background-color: #112F41;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.font {
color: #fff;
font-size: 30px;
font-style: oblique;
}
.span1 p {
position: absolute;
top: 38%;
right: 64%;
transform: rotate(200deg);
text-align: center;
}
.span2 p {
position: absolute;
top: 23%;
right: 58%;
transform: rotate(-130deg);
text-align: center;
}
.span3 p {
position: absolute;
top: 18%;
right: 34%;
transform: rotate(-90deg);
text-align: center;
}
.span4 p {
position: absolute;
top: 23%;
right: 18%;
transform: rotate(310deg);
text-align: center;
}
.span5 p {
position: absolute;
top: 38%;
right: 8%;
transform: rotate(-15deg);
text-align: center;
}
.span6 p {
position: absolute;
top: 55%;
right: 14%;
transform: rotate(15deg);
text-align: center;
}
.span7 p {
position: absolute;
top: 69%;
right: 27%;
transform: rotate(44deg);
text-align: center;
}
.span8 p {
position: absolute;
top: 78%;
right: 39%;
transform: rotate(90deg);
text-align: center;
}
.span9 p {
position: absolute;
top: 74%;
right: 61%;
transform: rotate(125deg);
text-align: center;
}
.span10 p {
position: absolute;
top: 58%;
right: 64%;
transform: rotate(156deg);
text-align: center;
}
.spin {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid white;
background: white;
color: white;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
audio{
display: none;
}
@keyframes animateArrow {
50% {
right: -50%;
}
}
.button-and-image-container {
display: flex;
align-items: center;
}
.button-and-image-container .spin {
margin-right: 10px; }