html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 180vh;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; 
  user-select: none;
  pointer-events: none;
}

/* Background */
#water_lilies {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

/* Layer to hold everything */
.layer {
  position: relative;
  width: 100%;
  height: 100vh;
}

.post-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 70vh);
  z-index: 1;
}

/* Post fills container */
#post {
  width: 100%;
  display: block;
  z-index: 1;
}

/* Profile on top of post */
#profile {
  position: absolute;
  top: 0.6%;
  right: 6.5%;
  width: 89%;
  z-index: 3;
}

/* Pink text under profile */
#pink_text {
  position: absolute;
  top: 26%;
  left: -17%;
  width: 50%;
  z-index: 2; /* below profile */
}

/* White outline above profile */
#text_outline {
  position: absolute;
  top: 26%;
  left: -17%;
  width: 50%;
  z-index: 4; /* above profile */
}

#hello_world {
  position: absolute;
  top: 60%;
  left: 70%;
  width: 20%;
  z-index: 5; 
}

.social_media_buttons {
  position: absolute;
  top: 110%; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

.social_media_buttons button {
  width: 80vw;
  max-width: 400px;
  padding: 12px 0;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid white;
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: background 0.2s, transform 0.2s;
  font-weight: 500;
}

.social_media_buttons button:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Heart layer container */
.heart-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* Individual heart */
.heart {
  position: absolute;
  color: black;
  -webkit-text-stroke: 2px rgb(255, 151, 203);
}

.heart-layer-1 {
  font-size: 2rem;
}

.heart-layer-2 {
  font-size: 3rem;
}

.heart-layer-3 {
  font-size: 4rem;
}

.heart-layer-1 .heart:nth-child(1) { top: 15%; left: 15%; }
.heart-layer-1 .heart:nth-child(2) { top: 45%; left: 90%; }
.heart-layer-1 .heart:nth-child(3) { top: 80%; left: -10%; }

.heart-layer-2 .heart:nth-child(1) { top: 5%; left: -5%; }
.heart-layer-2 .heart:nth-child(2) { top: 65%; left: 25%; }
.heart-layer-2 .heart:nth-child(3) { top: -5%; left: 70%; }

.heart-layer-3 .heart:nth-child(1) { top: -15%; left: 15%; }
.heart-layer-3 .heart:nth-child(2) { top: 30%; left: 100%; }
.heart-layer-3 .heart:nth-child(3) { top: 90%; left: 65%; }

/* Landscape mode - side by side layout */
@media (orientation: landscape), (min-aspect-ratio: 1/1) {
  html, body {
    height: 100vh;
    overflow: hidden;
  }

  .layer {
    width: 50%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
  }

  .post-group {
    width: min(40vw, 70vh);
    left: 65%;
  }

  .social_media_buttons {
    position: fixed;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .social_media_buttons a {
    width: 80%;
  }

  .social_media_buttons button {
    width: 100%;
    max-width: none;
  }
}

/* Small screen width (portrait) */
@media (max-width: 500px) and (orientation: portrait) {
  html, body {
    height: 125vh; 
  }

  .post-group {
    top: 35%; 
  }

  .social_media_buttons {
    top: 75%; 
  }
}

/* Medium screen width (portrait) */
@media (min-width: 500px) and (max-width: 620px) and (orientation: portrait) {
  html, body {
    height: 140vh; 
  }

  .post-group {
    top: 45%; 
  }

  .social_media_buttons {
    top: 85%; 
  }
}