.sky {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #3aa4d4, #aaf2ff);
  overflow: hidden;
}


.container {
  position: fixed;
  width: 100%;
  bottom: 10px;
  z-index: 3;
}

.tree {
  position: relative;
  width: 800px;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 800px) {
  .tree {
    width: 500px;
  }
}

@media (max-width: 500px) {
  .tree {
    width: 400px;
  }
}

.tree img {
  max-width: 100%;
  height: auto;
}

.tree::before {
  content: '';
  position: absolute;
  bottom: -25px;
  left: -800px;
  width: 400%;
  height: 200px;
  background: url('../img/grass.png') repeat-x;
  background-size: contain;
  z-index: -1;
}



#petals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

canvas {
  position: absolute;
  z-index: 6;
}




.clouds-container {
  position: relative;
  width: 100%;
  height: 50vh;
}

.clouds-container2 {
  position: fixed;
  top: 30%;
  width: 100%;
  height: 50vh;
  z-index: 2;
}

.cloud {
  position: absolute;
  bottom: 0;
  animation: moveClouds 210s linear infinite;
}


.cloud1 {
  z-index: 2;
  animation-duration: 265s;
}

.cloud2 {
  z-index: 2;
  animation-duration: 270s;
  top: 10px;
}

.cloud3 {
  z-index: 2;
  animation-duration: 275s;
}

.cloud4 {
  z-index: 2;
  animation-duration: 280s;
  top: 15px;
}

.cloud5 {
  z-index: 2;
  animation-duration: 289s;
  left: 320px;
}

.cloud6 {
  z-index: 2;
  animation-duration: 295s;
  top: 20px;
  left: 60px;
}

.cloud7 {
  z-index: 2;
  animation-duration: 270s;
  top: 10px;
  left: 195px;
}

.cloud8 {
  z-index: 2;
  animation-duration: 275s;
  left: 135px;
}

.cloud9 {
  z-index: 2;
  animation-duration: 180s;
  top: 18px;
  left: 180px;
}

.cloud10 {
  z-index: 2;
  animation-duration: 229s;
  top: 5px;
  left: 120px;
}

@keyframes moveClouds {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(220%);
  }
}




body {
  transition: background-color 0.5s ease, color 0.5s ease;
}






.click {
  position: fixed;
  top: 65%;
  left: 48%;
  z-index: 9;

}

@media (max-width: 500px) {
  .click {
    position: fixed;
    top: 65%;
    left: 45%;
    z-index: 9;

  }
}

#message {
  position: fixed;
  text-align: center;
  top: 40%;
  left: 50%;
  min-width: 260px;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border: 2px solid tan;
  border-radius: 8px;

  -webkit-box-shadow: 0px 0px 20px -1px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: 0px 0px 20px -1px rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 20px -1px rgba(255, 255, 255, 0.5);
    display: none;
}



#message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(105, 105, 105, 0.1);
  z-index: 7;
  display: none;
  animation: fadeInMessage 2s forwards;
}

#message p {
  margin: 0;
  font-size: 16px;
}

.hidden {
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: Arial, sans-serif;
  background-color: rgba(255, 255, 255, 0.9);

  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9;

  opacity: 0;
  animation: fallMessage 6s forwards;
}

@keyframes fallMessage {
  0% {
    top: -5%;

    opacity: 0.65;
  }

  95% {
    top: 40%;
    opacity: 0.90;
  }

  100% {
    top: 40%;
    opacity: 0.95;
  }
}

p {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #422339;
}

.hidden-message {
  opacity: 0;
  font-size: 18px;
  margin-top: 10px;
  animation: fadeInMessage 6s 7s forwards;
}

@keyframes fadeInMessage {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.hidden-message-2 {
  opacity: 0;
  font-size: 18px;
  margin-top: 10px;
  animation: fadeInMessage2 8s 9s forwards;
}

@keyframes fadeInMessage2 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}