*{
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/plebania.jpg);
  background-size: cover;
  background-position: center;
}

.mainbox{
  position: relative;
  width: 30%;
  height: 62%;
  margin-top:50px;
}

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

.box{
  widht: 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: green;
}

.span2 {
  clip-path: polygon(0 17%,30% 0, 50% 50%);
  background-color: red;
}
.span3 {
  clip-path: polygon(30% 0, 71% 0%, 50% 50%);
  background-color: blue;
}
.span4 {
  clip-path: polygon(71% 0, 100% 18%, 50% 50%);
  background-color: salmon;
}
.span5 {
  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
  background-color: #ff8300;
}
.box2 .span3 {
  background-color: #00ff04;
}
.box2 {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
.box2 .span1 {
  background: #333;
}
.font {
  color: #fff;
  font-size: 20px;
}
.box1 .span1 h5 {
  position: absolute;
  top: 40%;
  right: 63%;
  transform: rotate(200deg);
  text-align: center;
}
.box1 .span2 h5 {
  position: absolute;
  top: 30%;
  right: 57%;
  transform: rotate(-130deg);
  text-align: center;
}
.box1 .span3 h5 {
  position: absolute;
  top: 22%;
  right: 38%;
  transform: rotate(-90deg);
  text-align: center;
}

.box1 .span4 h5 {
  position: absolute;
  top: 25%;
  right: 16%;
  transform: rotate(-45deg);
  text-align: center;
}
.box1 .span5 h5 {
  position: absolute;
  top: 40%;
  right: 6%;
  transform: rotate(-15deg);
  text-align: center;
}
.box2 .span1 h5 {
  position: absolute;
  top: 34%;
  right: 70%;
  transform: rotate(200deg);
  text-align: center;
}
.box2 .span2 h5 {
  position: absolute;
  top: 28%;
  right: 54%;
  transform: rotate(-130deg);
  text-align: center;
}
.box2 .span3 h5 {
  position: absolute;
  top: 15%;
  right: 40%;
  transform: rotate(270deg);
  text-align: center;
}
.box2 .span4 h5 {
  position: absolute;
  top: 25%;
  right: 15%;
  transform: rotate(310deg);
  text-align: center;
}
.box2 .span5 h5 {
  position: absolute;
  top: 38%;
  right: 6%;
  transform: rotate(-20deg);
  text-align: center;
}
.spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid white;
  background: #1D76E5;
  color: #fff;
  box-shadow: 0 5px 20px #000;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
  z-index: 1000;
}
.spin:active{
  width: 85px;
  height: 85px;
  font-size: 15px;
}
.mainbox.animate: after{
  animation: animateArrow 0.7s ease infinite;
}
audio{
  display: none;
}
@keyframes animateArrow{
  50%{
    right: -50px;
  }
}