body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}
.main{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 380px;
    
    background-color: #272C34;
    
   
   

}
.circle{
    position: relative;
    height: 290px;
    width: 290px;
    border-radius:50% ;
    background: linear-gradient(to bottom ,skyblue 70%,#F0DE75 30%);
    overflow: hidden;
    animation: fadeout 3s linear infinite ;
  
}
.sun{
  
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: yellow;
    border-radius: 50%;
    transform-origin: bottom center; 
    animation: riseAndSet 3s infinite ease-in-out; 
   
}

.right{
  width: 58px;
  height: 57px;
  background-color: antiquewhite;
  position: absolute;
  top: 155px;
  left: 158px;
  clip-path: polygon(30% 100%, 100% 100%,0% 0%);
  animation: right 3s infinite  ease-in;

}

.left{
  width: 116px;
  height: 57px;
  background-color: wheat;
  position: absolute;
  top: 155px;
  left: 100px;
  clip-path: polygon(0% 100%, 100% 100%,50% 0%);
  animation: left 3s infinite  ease-in;

}
#shadow{
  
  background-color: slategrey;
  width: 360px;
  height: 30px;
  position: absolute;
  z-index: 2;
  top: 211px;
  left: -20px;
  transform-origin: 50% 0%;
  clip-path: polygon(115px 0%, 231px 0%,80% 100%);
  animation: shadow-on-the-floor 5s  infinite ;

}

    @keyframes riseAndSet {
      0% {
        transform:rotate(-180deg) translateX(150px);
      }
      50% {
        transform: rotate(-90deg) translateX(120px);  
      }
      100% {
        transform:  rotate(0deg)  translateX(100px) translateY(50px); 
      }
      }
@keyframes fadeout {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes left {
  0%{
    background-color: 
    wheat;
  }
  50%{
    background-color: rgb(165, 158, 147);
  }
  100%{
    background-color: rgb(119, 115, 106);
  }
}
@keyframes right {
  0%{
    background-color: #848588;
  }
 
  75%{
    background-color: #b5c1d3;
  }
  100%{
    background-color: rgb(212, 177, 112);
  }
}
@keyframes shadow-on-the-floor {
  0% {
      transform: scaleY(0);
      clip-path: polygon(115px 0%, 231px 0%, 100% 100%);
  }
  30%{
      transform: scaleY(1);
      clip-path: polygon(115px 0%,231px 0%,80% 100%);
  }
  55%{
      transform: scaleY(.4);
  }
  75%{
      transform: scaleY(1);
  }
  100%{
      transform:scaleY(0) ;
      clip-path: polygon(115px 0%,231px 0%,0% 100%);
  }
}