/* 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;
  position: relative; /* important so absolutely positioned cursor bits align to page */
}


/* Keep default cursor so dragging still works */
body {
  cursor: default;
}

/* Light pink glittery cursor circle */
#custom-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ffe4ec 30%, #ffb6c1 70%);
  border-radius: 50%;
  pointer-events: none; /* So it doesn't block clicks or drags */
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255, 228, 236, 0.9),
              0 0 12px rgba(255, 182, 193, 0.7),
              0 0 20px rgba(255, 192, 203, 0.8);
  animation: sparklePulse 1s infinite alternate;
  z-index: 9999;
}

/* Subtle glowing shimmer animation */
@keyframes sparklePulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 228, 236, 0.9),
                0 0 12px rgba(255, 182, 193, 0.7),
                0 0 20px rgba(255, 192, 203, 0.8);
  }
  100% {
    box-shadow: 0 0 8px rgba(255, 228, 236, 1),
                0 0 16px rgba(255, 182, 193, 0.9),
                0 0 24px rgba(255, 192, 203, 1);
  }
}



/* 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: 135px;
  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;
}




/* Your existing CSS */
#map1 {
  width: 877.5px;
  height: 640.5px; 
  position: absolute;
  top: 145px;
  left: 350px;
  background-image: url('map1.png');
  background-repeat: no-repeat;
  background-size: cover;
}








.marker {
  position: absolute;
  width: 12px; /* smaller */
  height: 12px; /* smaller */
  background: rgba(255, 182, 193, 0.8); /* light pink */
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 182, 193, 0.8),
              0 0 12px rgba(255, 192, 203, 0.6),
              0 0 18px rgba(255, 240, 245, 0.8);
  animation: sparkle 1.5s infinite alternate;
}

/* Hover glitter effect */
.marker:hover {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 8px rgba(255, 182, 193, 1),
              0 0 16px rgba(255, 192, 203, 0.9),
              0 0 24px rgba(255, 240, 245, 1);
}

/* Sparkle animation */
@keyframes sparkle {
  0% {
    box-shadow: 0 0 6px rgba(255, 182, 193, 0.8),
                0 0 12px rgba(255, 192, 203, 0.6),
                0 0 18px rgba(255, 240, 245, 0.8);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 182, 193, 1),
                0 0 20px rgba(255, 192, 203, 0.9),
                0 0 28px rgba(255, 240, 245, 1);
  }
}


/* Yellow houses (percentages adjusted to match new map size) */
.house2 { top: 67.50%; left: 18.80%; }
.house4 { top: 67.50%; left: 22.40%; }

.house1 { top: 72.00%; left: 39.25%; }
.house3 { top: 72.00%; left: 42.75%; }

.house5 { top: 79.50%; left: 52.75%; }
.airport {top: 79.50%; left: 56.00%;}

.main-house { top: 55.75%; left: 23.00%; }







#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')
  }