* { margin: 0; padding: 0;}


.main {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 400px;  height: 400px;  box-sizing: border-box;  border-radius: 50%;  background: transparent;  box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8);  animation: move 6s linear infinite;}
.main::after {  position: absolute;  content: "";  width: 40px;  height: 40px;  background: rgba(255, 255, 255, 0.5);  left: 80px;  top: 80px;  border-radius: 50%;  animation: move2 6s linear infinite;  filter: blur(1px);}
.main::before {  position: absolute;  content: "";  width: 20px;  height: 20px;  background: rgba(255, 255, 255, 0.5);  left: 130px;  top: 70px;  border-radius: 50%;  animation: move3 6s linear infinite;  filter: blur(1px);}
@keyframes move {  50% {    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;  }
  75% {    border-radius: 74% 26% 70% 30% / 78% 76% 24% 22%;  }
  25% {    border-radius: 51% 49% 43% 57% / 43% 68% 32% 57%;  }}
@keyframes move2 {  50% {    left: 60px;    top: 80px;  }
  75% {    left: 80px;    top: 120px;  }
  25% {    left: 50px;    top: 120px;  }}
@keyframes move3 {  50% {    left: 110px;    top: 75px;  }
  75% {    left: 130px;    top: 100px;  }
25% { left: 100px; top: 90px; }}

* {  margin: 0;  padding: 0;}
body {  background: #1e90ff;}
.main {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 400px;  height: 400px;  box-sizing: border-box;  border-radius: 50%;  background: transparent;  box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8);  animation: move 6s linear infinite;}
.main::after {  position: absolute;  content: "";  width: 40px;  height: 40px;  background: rgba(255, 255, 255, 0.5);  left: 80px;  top: 80px;  border-radius: 50%;  animation: move2 6s linear infinite;  filter: blur(1px);}
.main::before {  position: absolute;  content: "";  width: 20px;  height: 20px;  background: rgba(255, 255, 255, 0.5);  left: 130px;  top: 70px;  border-radius: 50%;  animation: move3 6s linear infinite;  filter: blur(1px);}
@keyframes move {  50% {    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;  }
  75% {    border-radius: 74% 26% 70% 30% / 78% 76% 24% 22%;  }
  25% {    border-radius: 51% 49% 43% 57% / 43% 68% 32% 57%;  }}
@keyframes move2 {  50% {    left: 60px;    top: 80px;  }
  75% {    left: 80px;    top: 120px;  }
  25% {    left: 50px;    top: 120px;  }}
@keyframes move3 {  50% {    left: 110px;    top: 75px;  }
  75% {    left: 130px;    top: 100px;  }
  25% {    left: 100px;    top: 90px;  }}