article{
	height: 100vh;

}
body{
	margin: 0;
}

#visual{
	height: 100vh;
  overflow: hidden;
  position: relative;
  --frontCol: rgb(0,0,55);
  --back: rgb(0,0,26);

  --frontCol: orangered;
  --back: rgb(255,50,0);

  --width: 10em;
  --t: 1.5em;
  background: var(--frontCol);
}
.frame{
  position: absolute;
  transition: transform 0.5s ease;
  width: var(--width);
  height: 3em;
}
.frame:after{
  content: "";
  position: absolute;
  top: calc(var(--t)*0.7);
  background: var(--frontCol);
  width: var(--width);
  height: calc(var(--width)*0.5);
  top: calc(var(--t)*0.75);
  border-radius: 0 0 100% 100%;
}
@keyframes turn{
  0%,10%{
    transform: rotate(-40deg);
  }
  90%,100%{
    transform: rotate(240deg);
  }
}
.hole{
  background: var(--back);
  width: var(--t);
  height: calc(var(--t)*0.7);
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 0;
}
.mm:nth-child(5),
.hole:nth-child(2){
  left: calc(100% - var(--t) - 5px);
}
.mm:before{
  content: "";
  border-bottom: calc(var(--t)*0.3) solid var(--frontCol);
  width: calc(var(--t)*0.7);
  height: calc(var(--t)*0.8);
  transform: rotate(-65deg);
  position: absolute;
  left: calc(var(--t)*0.25);
  top: calc(var(--t)*0.25);
}
.mm:nth-child(5):before{
  transform: rotate(65deg);
  left: calc(var(--t)*-0.001);
}
.mm{
  content: "";
  border-bottom: calc(var(--t)*0.3) solid var(--frontCol);
  width: var(--t);
  height: calc(var(--t)*0.8);
  border-radius: 100%;
  position: absolute;
  left: 5px;
  top: calc(var(--t)*-0.15);
}
.ball{
  background: indigo;
  transform-origin: calc(var(--width) * 0.5 - var(--t)*0.25) 0;
  transform: rotate(-30deg);
  border-radius: 50%;
  width: calc(var(--t)*0.8);
  height: calc(var(--t)*0.8);
  position: absolute;
  left: calc(var(--t)*0.25);
  top: 0;
  animation: turn 2s linear 0s infinite alternate;
}