.label {
font-size: 22px;
}
.mainbox {
position: relative;
width: 80vw; height: 80vw; max-width: 500px; max-height: 500px; margin: 5vw auto; }
.box {
height: 100%;
border-radius: 50%;
border: 4px solid #dd9b9b;
overflow: hidden;
transition: all ease-in-out 5s;
transform: rotate(90deg);
}
.font {
color: #fff;
font-size: 6vw; font-style: oblique;
}  .span1 {
clip-path: polygon(0 15%, 0% 50%, 50% 50%);
background-color: #ffd4d9; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span2 {
clip-path: polygon(0 15%, 36% 0, 50% 50%);
background-color: #ffcdd2; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span3 {
clip-path: polygon(36% 0, 72% 0, 50% 50%);
background-color: #f8bbd0; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span4 {
clip-path: polygon(71% 0%, 100% 18%, 50% 50%);
background-color: #f48fb1; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span5 {
clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
background-color: #f06292; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span6 {
clip-path: polygon(100% 82%, 100% 50%, 50% 50%);
background-color: #ec407a; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span7 {
clip-path: polygon(70% 100%, 100% 82%, 50% 50%);
background-color: #d81b60; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span8 {
clip-path: polygon(22% 150%, 70% 100%, 50% 50%);
background-color: #c2185b; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span9 {
clip-path: polygon(3% 83%, 36% 100%, 50% 50%);
background-color: #ad1457; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.span10 {
clip-path: polygon(0% 50%, 0% 89%, 50% 50%);
background-color: #880e4f; width: 100%;
height: 100%;
display: inline-block;
position: absolute;
} .span1 p {
position: absolute;
top: 38%;
right: 64%;
transform: rotate(200deg);
text-align: center;
}
.span2 p {
position: absolute;
top: 23%;
right: 53%;
transform: rotate(232deg);
text-align: center;
}
.span3 p {
position: absolute;
top: 18%;
right: 31%;
transform: rotate(-90deg);
text-align: center;
}
.span4 p {
position: absolute;
top: 24%;
right: 17%;
transform: rotate(310deg);
text-align: center;
}
.span5 p {
position: absolute;
top: 40%;
right: 5%;
transform: rotate(-15deg);
text-align: center;
}
.span6 p {
position: absolute;
top: 55%;
right: 7%;
transform: rotate(15deg);
text-align: center;
}
.span7 p {
position: absolute;
top: 69%;
right: 18%;
transform: rotate(47deg);
text-align: center;
}
.span8 p {
position: absolute;
top: 74%;
right: 35%;
transform: rotate(90deg);
text-align: center;
}
.span9 p {
position: absolute;
top: 67%;
width: 32%;
right: 51%;
transform: rotate(125deg);
text-align: center;
}
.span10 p {
position: absolute;
width: 21%;
top: 54%;
right: 66%;
transform: rotate(158deg);
text-align: center;
} .spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15vw; height: 15vw; max-width: 75px; max-height: 75px; border-radius: 50%;
border: 4px solid white;
background: white;
color: white;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 4vw; cursor: pointer;
}
.spin:active {
width: 14vw;
height: 14vw;
font-size: 3.5vw;
}
.img-spin {
padding-bottom: 9px !important;
}
.link-custom{
text-decoration: none;
color: #ad1457;
}
.link-custom:hover{
text-decoration: none;
color: #880e4f;
} @media (max-width: 768px) {
.mainbox {
order: 1; width: 90vw;
height: 90vw;
max-width: 400px; max-height: 400px; }
.spin {
width: 20vw;
height: 20vw;
max-width: 60px; max-height: 60px; font-size: 5vw;
}
.label {
font-size: 4vw; }
.font {
font-size: 6vw; }
img {
width: 100px !important;
}
.img-spin {
padding-bottom: 0 !important;
}
.img-dx {
width: 100% !important;
} .text-wheel {
text-align: center;
order: 2;
padding-top: 10%;
padding-right: 11% !important;
padding-left: 10% !important;
padding-bottom: 10% !important;
} .mobile-br {
display: none;
}
.col-12-mobile {
flex: 0 0 100% !important; max-width: 100% !important; } .animated-arrow {
transform: rotate(
90deg
) !important; } @keyframes arrow-bounce {
0%,
100% {
transform: translateX(0); }
50% {
transform: translateX(
-10px
); }
}
} audio {
display: none;
} .button-and-image-container {
display: flex;
align-items: center;
}
.button-and-image-container .spin {
margin-right: 10px; }
.text-wheel {
padding-top: 4%;
text-align: justify;
} .animated-arrow {
font-size: 2rem; font-weight: bold; color: #ff69b4; animation: arrow-bounce 1.5s infinite; display: inline-block; margin-right: 10px; } @keyframes arrow-bounce {
0%,
100% {
transform: translateX(0); }
50% {
transform: translateX(-10px); }
}