body{
background-color: #c8c8c8;

}

.spinner-wheel-container{
  width:40vw;
  height:40vw;

  border-radius: 50%;
  background-color: transparent;
  position:fixed;
  right:0px;
  top:0px;
  z-index:20;
/*  transform: translate(10%, 30%); */
}
.spinner-background-container{
  width:70vw;
  height:70vw;

  border-radius: 50%;
  background-color: transparent;
  position:fixed;
  top:0px;
  left:0px;
  z-index:1;
  opacity:5%;
  transform: translate(-20%, -50%);
}

.wheel-lv2-position{
position:relative;
width: 75%;
aspect-ratio:1/1;
margin-left: 50%;
margin-top:50%;
background-color: solid transparent;
  transform: translate(-50%, -50%);
}
.wheel-lv2{
  display:block;
position:absolute;
width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background-color: green;
}
.wheel-2-spin1{  transform: rotate(45deg);  }
.wheel-2-spin2{  transform: rotate(90deg);  }
.wheel-2-spin3{  transform: rotate(135deg);  }
.wheel-2-spin4{  transform: rotate(180deg);  }
.wheel-2-spin5{  transform: rotate(225deg);  }
.wheel-2-spin6{  transform: rotate(270deg);  }
.wheel-2-spin7{  transform: rotate(315deg);  }

.wheel-8-tobe{
  position:relative;
  width:40%;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color: transparent;
    margin-left: 50%;
    margin-top: -20%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.dot-center-3-tobe{
  display:block;
position:absolute;
width:50%;
  aspect-ratio:1/1;
  border-radius:50%;
  background-color: black;
  margin-left: 25%;
  margin-top: 25%;
}
.dot3-spin1{ transform: rotate(120deg);}
.dot3-spin2{ transform: rotate(240deg);}

.dot3 {
  display: block;
  position:relative;
  width:50%;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color: blue;
    margin-left: 50%;
    margin-top: -25%;
    transform: translate(-50%, -50%);
}

.wheel-lv3-position{
position:relative;
width: 100%;
aspect-ratio:1/1;
border-radius:50%;
margin-left: 50%;
margin-top:-75%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}
.wheel-lv3{
  display:block;
position:absolute;
width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background-color: transparent;
}
.wheel-3-spin1{  transform: rotate(90deg);  }
.wheel-3-spin2{  transform: rotate(180deg);  }
.wheel-3-spin3{  transform: rotate(270deg);  }

.wheel-4-tobe{
  position:relative;
  width:30%;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color: white;
    margin-left: 50%;
    margin-top: 30%;
    transform: translate(-50%, -50%);
}
.dot-center-2-tobe{
  display:block;
position:absolute;
width:50%;
  aspect-ratio:1/1;
  border-radius:50%;
  background-color: grey;
  margin-left: 25%;
  margin-top: 25%;
}
.dot2 {
  display: block;
  position:relative;
  width:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color: blue;
    margin-left: 50%;
    margin-top: 0%;
    transform: translate(-50%, -50%);
}
.dot2-spin1{transform: rotate(180deg); }

@keyframes wheel-2-outer-spinning {
to{transform:rotate(360deg);}
}
@keyframes wheel-2-inner-spinning {
to{transform:rotate(360deg);}
}

@keyframes wheel-3-outer-spinning {
to{transform:rotate(360deg);}
}

@keyframes wheel-3-inner-spinning {
to{transform:rotate(360deg);}
}

.option-container{
width: 100vw;
height: 100vw;
border-radius: 50%;
transform: translate(30%, -45%);
display: block;
position: fixed;
top:0px;
right: 0px;
border: solid red 10px;
}
.option-center{
  width: 85vw;
  height: 85vw;
  border-radius: 50%;
  display: block;
  position: absolute;
  bottom:0px;
  right: 0px;
  border: solid blue 10px
  z-index:2;
}
.opt-spin1{ transform:rotate(10deg);}
.opt-spin2{ transform:rotate(-10deg);}
.opt-spin3{ transform:rotate(-20deg);}
.opt-spin4{ transform:rotate(-30deg);}

.option-box{
width:33%;
height:7%;
border-radius: 20px;
display: block;
position:relative;
margin-left:-30%;
margin-top: 50%;
background-color: #e3df9c;
z-index: 35;
  }

  .opt-b-spin1{ transform:rotate(-10deg);}
  .opt-b-spin2{ transform:rotate(10deg);}
  .opt-b-spin3{ transform:rotate(20deg);}
  .opt-b-spin4{ transform:rotate(30deg);}