.circle-container {
  position: absolute;
  top: 5vh;
  left: 55vw;
  width: clamp(12rem, 25vw, 32rem);
  height: clamp(12rem, 25vw, 32rem);
}

.circle-sky {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #d1ebf6;
    filter: blur(200px);
    opacity: 0.7;
    animation: sky 5s ease-in-out infinite;
}

.circle-sun {
    position: absolute;
    width: 75%;
    height: 75%;
    left: 12.5%;
    top: 12.5%;
    border-radius: 100%;
    background: #ffed89;
    filter: blur(200px);
    opacity: 0.7;
    animation: sun 5s ease-in-out infinite;
}

/*--- media querys ---*/
@media screen and (max-width: 599px) {
.circle-container {
     left: 25vw;
}
}

@keyframes sun {
    0% {
      transform: scale(1);
      opacity: 1;
    }
  
    50% {
      transform: scale(0.3);
      opacity: 0.7;
    }
  
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }