* {
  box-sizing: border-box;
  margin: 0;
}

main {
  height: 100dvh;
  width: 100dvw;
  max-width: 100dvw;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: rgb(190, 242, 255);
  overflow: hidden;
}

@keyframes sun-animation {
  0% {
    height: 550px;
    width: 550px;
  }
  50% {
    height: 950px;
    width: 950px;
  }
  100% {
    height: 550px;
    width: 550px;
  }
}

.sun {
  width: 550px;
  height: 550px;
  animation-name: sun-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  background-image: radial-gradient(
    circle,
    rgb(253, 255, 214) 10%,
    rgb(252, 255, 190) 30%,
    rgba(186, 50, 50, 0) 60%
  );
}
/* .sun:hover {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle,
    rgb(253, 255, 214) 20%,
    rgb(252, 255, 190) 40%,
    rgba(186, 50, 50, 0) 60%
  );
} */

.cloud:nth-of-type(1) {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #d63434;
}

@keyframes h1-animation {
  0% {
    opacity: 0%;
  }
  25% {
    opacity: 50%;
  }
  50% {
    opacity: 100%;
  }
  75% {
    opacity: 50%;
  }
  100% {
    opacity: 0%;
  }
}
main h1 {
  position: absolute;
  color: rgb(246, 197, 137);
  opacity: 0;
  animation-name: h1-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.text {
  position: absolute;
}

.date {
  top: 10%;
  right: 10%;
  position: absolute;
  color: rgb(246, 197, 137);
}