@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap'); 

body, select, option, button, input, label { 
  font-family: 'Jua', sans-serif; 
} 

body { 
  font-family: 'Jua', sans-serif; 
  text-align: center; 
  background: url('images/background.jpg') no-repeat center center fixed; 
  background-size: cover; 
  padding: 30px; 
  color: #333; 
} 

select, select option { 
  font-family: 'Jua', sans-serif !important; 
} 

h1 { 
  margin-bottom: 30px; 
  font-size: 28px; 
  color: #8c5872; 
} 

.subtext { 
  font-size: 14px; 
  color: #777; 
  margin-top: -15px; 
  margin-bottom: 25px; 
  font-style: italic; 
} 

.selector { 
  margin: 8px 0; 
} 

#iceCreamContainer { 
  position: relative; 
  width: 250px; 
  height: 600px; 
  margin: -40px auto 30px auto; /* pulls it up */ 
  pointer-events: none; 
} 

#iceCreamContainer img { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  pointer-events: none; 
  user-select: none; 
  opacity: 1; /* show immediately */ 
  transition: none; /* no fade */ 
}

/* ✅ IMAGE LAYERS & POSITIONS (UNCHANGED) */ 
#coneImage { 
  bottom: 0; 
  z-index: 1; 
  width: 150px; 
} 

#scoopImage { 
  bottom: 180px; 
  z-index: 2; 
  width: 200px; 
} 

#jungkookImage { 
  bottom: 250px; 
  z-index: 3; 
  width: 200px; 
} 

#frostingImage { 
  bottom: 370px; 
  z-index: 4; 
  width: 200px; 
} 

#toppingImage { 
  bottom: 340px; 
  z-index: 5; 
  width: 200px; 
} 

/* SELECT STYLING */ 
select { 
  background-color: transparent; 
  color: #42403E; 
  border: 2px solid #cf88b1; 
  padding: 8px; 
  border-radius: 8px; 
  font-family: 'Jua', sans-serif; 
  font-size: 12px; 
} 

.selector label { 
  font-size: 15px; 
  color: #555; 
  font-weight: 500; 
} 

#generateButton { 
  margin-top: 20px; 
  padding: 5px 15px; 
  background-color: #ffffff; 
  color: #42403E; 
  border: 2px solid #F0E3CE; 
  border-radius: 8px; 
  font-family: 'Jua', sans-serif; 
  font-size: 12px; 
  cursor: url('images/cursor.png') 16 16, auto !important; 
  transition: transform 0.2s ease, border-color 0.3s ease, background-color 0.3s ease; 
} 

#generateButton:hover, #generateButton:focus { 
  background-color: #ffffff; 
  transform: scale(1.05); 
  border-color: #F0E3CE; 
} 

button { 
  background: none; 
  border: none; 
  outline: none; 
} 

button:hover, button:focus, button:active { 
  box-shadow: none !important; 
} 

/* MULTI-SELECT DROPDOWN */ 
.multi-select { 
  position: relative; 
  display: inline-block; 
  width: 200px; 
  text-align: left; 
  font-family: 'Jua', sans-serif; 
  font-size: 12px; 
} 

.multi-select-display { 
  padding: 8px; 
  border: 2px solid #cf88b1; 
  border-radius: 8px; 
  background-color: transparent; 
  cursor: pointer; 
  color: #42403E; 
  min-height: 30px; 
  line-height: 14px; 
  font-family: 'Jua', sans-serif; 
} 

.multi-select-display::after { 
  content: "▾"; 
  float: right; 
  margin-right: 4px; 
  font-size: 10px; 
  color: #555; 
} 

.multi-select-options { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  border: 2px solid #cf88b1; 
  border-radius: 8px; 
  background: #fff; 
  max-height: 180px; 
  overflow-y: auto; 
  display: none; 
  z-index: 100; 
} 

.multi-select-options label { 
  display: block; 
  padding: 6px 8px; 
  cursor: pointer; 
} 

.multi-select-options label:hover { 
  background-color: #f0e3ce; 
} 

.multi-select.active .multi-select-options, .multi-select-options.show { 
  display: block; 
} 

.multi-select-display::placeholder { 
  font-family: 'Jua', sans-serif !important; 
} 

/* CUSTOM CURSOR */ 
body, select, option, label, a { 
  cursor: url('images/cursor.png') 16 16, auto; 
} 

select, option { 
  cursor: url('images/cursor.png') 16 16, auto !important; 
} 

/* ✅ WATERMARK */ 
.watermark { 
  font-size: 12px; /* smaller */ 
  color: #999; /* lighter grey */ 
  font-style: normal; /* no italic unless you want it */ 
} 

.watermark a { 
  color: #1DA1F2; /* Twitter blue */ 
  text-decoration: none; 
} 

.watermark a:hover { 
  text-decoration: underline; 
} 

#placeholderContainer { 
  width: 250px; /* or whatever width you want */ 
  height: 300px; /* adjust to fit your image */ 
  margin: 20px auto 0 auto; 
  position: relative; 
} 

#placeholderContainer img { 
  width: 100%; 
  height: auto; 
  display: block; 
  object-fit: contain; 
  opacity: 1; /* start fully visible */
  transition: opacity 0.5s ease; /* fade-out effect */
} 

#coneImage { 
  bottom: 0; 
  z-index: 1; 
  width: 150px; 
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); 
}