* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Backgrounds from first code */
.background { position: fixed; inset:0; z-index:0; }
body.day { background: linear-gradient(135deg,#ff4d6d,#ff85a1,#fbb1bd); background-size:300% 300%; animation: gradientShift 20s ease infinite; }
body.night { background: linear-gradient(135deg,#0b1026,#1b1f4b,#2e1a47); background-size:300% 300%; animation: gradientShift 30s ease infinite; }

.container { text-align:center; padding:30px; z-index:2; display: flex; flex-direction: column; align-items: center; }
.hug { font-size:90px; margin-bottom:15px; animation: emojiPulse 1.2s infinite; }

.note {
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding:25px;
  max-width:470px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.45);
  box-shadow: 0 20px 40px rgba(255,182,193,.25);
}

/* NEW BUTTON STYLE */
.button-wrapper { margin-top: 30px; height: 60px; }

.custom-btn {
  position: relative;
  text-decoration:none;
  color:#000;
  width:200px;
  line-height:45px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  background-color: #fff;
  border:4px solid #000;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-btn:hover {
  background-color: #FFC0CB;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.custom-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0 #000;
}

/* Image Styling */
#loadingImage {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  z-index: 10;
  transition: opacity 1s;
}

/* Keep original animations */
.hearts span { position:absolute; bottom:-50px; animation: floatUp 8s linear infinite; }
.particles span { position:absolute; width:4px; height:4px; background:white; border-radius:50%; animation: sparkle 3s linear infinite; }
.whisper { margin-top: 15px; font-family: 'Pacifico', cursive; font-size: 20px; color: white; transition: opacity 2s; }

@keyframes floatUp {to{transform:translateY(-110vh) rotate(360deg);opacity:0;}}
@keyframes emojiPulse {40%{transform:scale(1.08);}}
@keyframes gradientShift {50%{background-position:100% 50%;}}
@keyframes sparkle {to{opacity:0; transform:scale(1.8) translateY(-60px);}}