* { font-family: "Graphic Pixel", sans-serif; color: white; }
body {
  background-color: #000000; /* pitch black background */
  margin: 0;
  padding: 0;
}

.wallpaper {
  position: relative;
  overflow: hidden;
}

.center-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
.box-contain { display: flex; flex-direction: row; justify-content: center; gap: 20px; margin-top: 1em; flex-wrap: wrap; }
.pfp { width: 110px; height: auto; border-radius: 50%; margin-bottom: 10px; }
.text { margin-top: 20px; color: rgb(221,221,221); text-align: center; font-size: 12px; }
.click { position: absolute; top:0; left:0; width:100%; height:100vh; background-color:black; display:flex; justify-content:center; align-items:center; font-size:24px; cursor:pointer; }
#phrase { position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); font-size:28px; font-weight:bold; opacity:1; }
#phrase span { opacity:0; display:inline-block; margin-right:5px; transition: opacity 0.2s ease; }
.entered { display:none; text-align:center; padding-top:20px; }

@media (max-width:600px){
  html,body{overflow-x:hidden;}
  .intial-container{margin-top:1200px;}
  .box-contain{flex-direction:column;align-items:center;}
  .text{font-size:8px;margin-bottom:150px;}
}

.pfp {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover; /* ensures images fit nicely in the circle */
}

h3 {
  margin: 0;
  font-size: 16px;
}

.text {
  margin-top: 20px;
  font-size: 12px;
}

/* Hearts animation container */

#hearts-container {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none; /* let clicks pass through */
  overflow: hidden;
  z-index: 999; /* make sure hearts are visible above content */
}

.heart {
  position: absolute;
  top: -48px;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated; /* keep it crisp/pixelated */
  transform-origin: center;
  will-change: transform, opacity;
  animation-name: fall, fadeOut;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fall {
  to { transform: translateY(110vh) rotate(var(--rotate)); }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Retro CRT: soft vignette + scanlines */
.wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(60,0,30,0.07) 0%, rgba(0,0,0,1) 70%);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.9);
}

.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.9;
}