body{
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-image: url(img/galaxy.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
   #main{
    position: relative;
    text-align: center;
    overflow: hidden;
   }
   .parent{
    position: relative;
    margin-top: 30px;
    margin-left: 10%;
    width: 700px;
    height: 700px;
    border: 2px solid aqua;
    border-radius: 50%;
   }
   .fast{
    position: absolute;
    inset: 0;
    animation: round1 6s linear infinite;
   }
   .secound{
    position: absolute;
    inset: 80px;
    border: 1px solid white;
    border-radius: 50%;
    animation: round1 8s linear infinite;
   }
   .third{
    position: absolute;
    inset: 140px;
    border-radius: 50%;
    border: 1px solid salmon;
    animation: round1 10s linear infinite;
   }
   .fourth{
    position: absolute;
    inset: 190px;
    border: 1px solid seashell;
    border-radius: 50%;
    background: radial-gradient( circle, #fff7cc 0%, #ffd54f 40%, #ff9800 70%);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.8), 0 0 60px rgba(255, 152, 0, 0.6), 0 0 120px rgba(255, 87, 34, 0.4);
   }
   .childa,.childb,.childc{
    position: absolute;
    top: 50%;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
   }
   .childb{
    top: 57%;
    transform: translate(-50%, -57%);
   }
   @keyframes round1 {
     from{
        rotate: 0deg;
        
     }
     to{
        rotate: 360deg;
     }
    }
    img{
    width: 70px;
    height: 70px;
    border-radius: 70%;
   }