/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  background-image: url('https://i.pinimg.com/736x/97/b7/d8/97b7d862d2b543f5afcf454a0104b07b.jpg');
   background-size: cover;
  color: #333;
 font-family: "Pixelify Sans", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  text-align: center;
  cursor: none;
  

}


/* Main content container */
.container {
  background-color: white;
  padding: 30px;
  margin: 40px auto;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 700px;
  text-align: center;
}

.section {
  border: 2px dashed #ffc0cb;
  border-radius: 12px;
  padding: 20px;
  margin: 0.5px auto;
  background-color: #fff5fa;
  
  display: flex;
  flex-direction: column;
  gap: 5px;
}





/* Headings */
h1 {
  color: #fc2892;
  font-size: 2.5em;
  margin-bottom: 20px;
}

/* Links */
a {
  color: #ff69b4;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}

/* Lists */
ul {
  list-style: circle;
  padding-left: 1.2em;
  text-align: left;
  display: inline-block;
}




/* Paragraphs */
p {
  font-size: 1.1em;
  line-height: 1.6;
  margin: 15px 0;
}





.section-wrapper.horizontal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px;
}

.section-wrapper.vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px;
}

#my-draggable-box {
  width: 663px;
  height: 406px;
  position: absolute;
  top: 150px;
  left: 30px;
  background-image: url('https://www.rivistastudio.com/wp-content/uploads/2017/07/ms-paint-xp.jpg'); 
  background-size: cover;
  background-position: center;
  border: 2px solid #888;
  cursor: grab;
  z-index: 9999;
}


#left {
  width: 541px;
  height: 461px;
  position: absolute;
  top:0px;
  left:0px;
  background-image: url('sunflower-left.png')
  }

#right {
  width: 617px;
  height: 404px;
  position: absolute;
  top:0px;
  right:0px;
  background-image: url('sunflower-right.png')
  }



.heart {
  position: absolute;
  pointer-events: none;
  font-size: 16px;
  animation: floatFade 1s forwards;
  z-index: 1000;
  user-select: none;
}

@keyframes floatFade {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -30px) scale(1.5);
  }
}




.pastel-button {
  display: inline-block;
  padding: 18px 40px;
  font-size: 20px;
  font-family: 'Comic Sans MS', cursive;
  font-weight: bold;
  color: #fff0f7;
  background: linear-gradient(135deg, #ffe6f2, #ffccf9, #ffd6fa);
  background-size: 300% 300%;
  animation: pastelPulse 2s ease-in-out infinite, pastelShift 10s linear infinite;
  border: 3px dashed #ffcce5;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 0 10px #ffc1e3, 0 0 30px #ffd6fa;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}

.pastel-button:hover {
  transform: scale(1.06) rotate(1deg);
}

@keyframes pastelPulse {
  0% { box-shadow: 0 0 10px #ffd6fa; }
  50% { box-shadow: 0 0 20px #ffc1e3; }
  100% { box-shadow: 0 0 10px #ffd6fa; }
}

@keyframes pastelShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sparkles */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff0fa, #ffcce5, transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: glitterFloat 1s forwards;
  z-index: 1;
}

@keyframes glitterFloat {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(1.5);
  }
}