@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
  --blue: #74abea;
  --red: #f5766b;
  --pink: #e55ebf;
  --shadow: rgba(0, 0, 0, 0.25);
}

html, body {
  overflow: hidden;
  background: #ce749e;
}

@keyframes boxMove{
  0% { transform: scale(var(--initialScale)) rotate(var(--initialAngle)); }
  100% { transform: scale(var(--endScale)) rotate(var(--endAngle)); }
}

.box {
  top: calc(50% - 10vmin);
  left: calc(50% - 10vmin);
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  background-color: var(--pink);
  background-image: radial-gradient(circle at 50% 10%, var(--blue) 5%, transparent 80%),
    radial-gradient(circle at 50% 90%, var(--red) 25%, transparent);
  border-radius: 3vmin;
  box-shadow: 0 0 6vmin var(--shadow);
  animation: boxMove 4s linear infinite;  
}

.box0 { --initialScale: 0.30; --endScale: 1.00; --initialAngle: +10deg; --endAngle: +00deg; }
.box1 { --initialScale: 1.00; --endScale: 1.50; --initialAngle: +00deg; --endAngle: -10deg; }
.box2 { --initialScale: 1.50; --endScale: 2.00; --initialAngle: -10deg; --endAngle: -20deg; }
.box3 { --initialScale: 2.00; --endScale: 3.00; --initialAngle: -20deg; --endAngle: -25deg; }
.box4 { --initialScale: 3.00; --endScale: 4.00; --initialAngle: -25deg; --endAngle: -30deg; }
.box5 { --initialScale: 4.00; --endScale: 5.00; --initialAngle: -30deg; --endAngle: -40deg; }
.box6 { --initialScale: 5.00; --endScale: 6.50; --initialAngle: -40deg; --endAngle: -50deg; }
.box7 { --initialScale: 6.50; --endScale: 8.00; --initialAngle: -50deg; --endAngle: -60deg; }
.box8 { --initialScale: 8.00; --endScale: 10.00; --initialAngle: -60deg; --endAngle: -70deg; }
.box9 { --initialScale: 10.00; --endScale: 14.00; --initialAngle: -70deg; --endAngle: -85deg; }
.box10 { --initialScale: 14.00; --endScale: 20.0; --initialAngle: -85deg; --endAngle: -99deg; }

@keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.box0 {
  animation: boxMove 4s linear infinite, show 4s linear infinite;
}

.title{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20vmin;
  height: 20vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9vmin;
  font-family: 'Varela Round', sans-serif;
  transform: translate(-50%, -50%);
}

.title::before {
  content: "";
  display: block;
  position: absolute;
  width: 10vmin;
  height: 8.25vmin;
  top: 45%;
  border-radius: 50%;
  box-shadow: 0 2vmin 0 -0.75vmin;
}