*{

box-sizing: border-box;
margin:0;
padding:0;
outline: none;

}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: url(../images/milad-fakurian-PGdW_bHDbpI-unsplash.jpg);
background-size: cover;
background-position: center;
}


.mainbox{
    position: relative;
    width:500px;
    height:500px;
    margin-top:50px;
}

.mainbox:after{
position: absolute;
content:"";
width: 100%;
height: 100%;
background:url(../assets/arrow.png) no-repeat;
background-size: 5%;
Left: 5%;
top: 48%;
transform: rotate(90deg);
}

.box{
    width:100%;
    height:100%;
  position:relative;
  border-radius: 50%;
  border: 10px solid whitesmoke;
  overflow: hidden;
  transition:all ease-in-out 5s;
  transform:rotate(90deg);
}

span{
    width:100%;
    height:100%;
display: inline-block;
position:absolute;
}

.span1{
    clip-path: polygon(0 17%,0 50%, 50% 50%);
    background-color: #D586E9;
}

.span2{
    clip-path: polygon(0 17%, 30% 0, 50% 50%);
    background-color: #B98EA7;
}

.span3 {
clip-path: polygon(30% 0, 71% 0, 50% 50%);
background-color: #f5f5f5;
}

.span4 {
    clip-path: polygon(71% 0, 100% 18%, 50% 50%);
    background-color: #0AD6B4;
    }

 .span5 {
        clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
        background-color: #D7C2CE
        }

       
        .box2.span3 {
            background-color: #168918;
            }

            .box2{
                width:100%;
                height: 100%;
                transform: rotate(180deg);
            }

.box2 .span1{
background:#D586E9
}


.font{
    color: #fff;
    font-size:20px;
}

.box1 .span1 h5{
font-size: 25px;
position: absolute;
top:40%;
right:63%;
transform: rotate(190deg);
text-align: center;

}


.box1 .span2 h5{
    font-size:25px;
    position: absolute;
    top:30%;
    right:57%;
    transform: rotate(-145deg);
    text-align: center;
    
    }



        .box1 .span3 h5{
            font-size:25px;
            position: absolute;
            top:16%;
            right:35%;
            transform: rotate(-100deg);
            text-align: center;
            
            }


            .box1 .span4 h5{
                font-size:25px;
                position: absolute;
                top:25%;
                right:16%;
                transform: rotate(-45deg);
                text-align: center;
                
                }



                .box1 .span5 h5{
                    font-size:25px;
                    position: absolute;
                    top:40%;
                    right:6%;
                    transform: rotate(-15deg);
                    text-align: center;
                    
                    }
    

                    
                    .box2 .span1 h5{
                        font-size: 25px;
                        position: absolute;
                        top:34%;
                        right:70%;
                        transform: rotate(200deg);
                        text-align: center;
                        
                        }
        

       
                        .box2 .span2 h5{
                            font-size:25px;
                            position: absolute;
                            top:25%;
                            right:55%;
                            transform: rotate(-139deg);
                            text-align: center;
                            
                            }
            
       
                            .box2 .span3 h5{
                               font-size:25px;
                                position: absolute;
                                top:15%;
                                right:40%;
                                transform: rotate(270deg);
                                text-align: center;
                                
                                }
                
       
                                .box2 .span4 h5{
                                  font-size:25px;
                                    position: absolute;
                                    top:25%;
                                    right:15%;
                                    transform: rotate(310deg);
                                    text-align: center;
                                    
                                    }
                    
       
                                    .box2 .span5 h5{ 
                                        font-size:25px;
                                        position: absolute;
                                        top:38%;
                                        right:10%;
                                        transform: rotate(-30deg);
                                        text-align: center;
                                        

                                        }
                                        

                                    
                        .spin{
                            position: absolute;
                            top:50%;
                            Left:50%;
                            transform:translate(-50%,-50%);
                            width:75px;
                            height:75px;
                            border-radius: 50%;
                            border:4px solid white;
                            background:#1D76E5;
                            color:#fff;
                            box-shadow: 0 5px 20px #D586E9;
                            font-weight:bold;
                            font-size: 22px;
                            cursor: pointer;
                            z-index:1000;

                        }
                        .spin:active{
                            width:70px;
                            height: 70px;
                            font-size: 20px;

                        }

                        .mainbox.animate:after{
                            animation:animateArrow 0.7s ease infinite;

                        }

                        audio{
                            display: none;
                        }

                        @keyframes animateArrow{
                            50%{
                                right: -50px;
                            }
                        }

@media screen and (max-width: 450px) {
	.mainbox {
		width: 300px;
		height: 300px;
		margin: auto;
	}	
	span {
		width: 300px;
		height: 300px;
	}
	.box2 h5 {
		font-size: 1rem !important;
	}
	.box1 h5 {
		font-size: 1rem !important;
	}
}