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

/* Home Page Main Container */
.homepage-container {
    max-width: 800px; /* Set the max width to 800px, or adjust as needed */
    margin: 0px auto; /* Center the container */
    padding: 0px;
    background: #fdf8fa; /* Same background color as the blog posts */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
    width: 50%; /* Set the container width to 50% of the screen */
    overflow: hidden;
}

/* Parallax Containers (Base Styles) */
.parallax-container-1,
.parallax-container-2,
.parallax-container-3 {
    position: relative;
    width: 100%;
    height: 400px; /* Default height for larger screens */
    margin: 0 auto;
    background-size: cover; /* Ensures image covers the container */
    background-position: center center; /* Keeps images centered */
    background-repeat: no-repeat;
    transition: background-position 0.3s ease-out, height 0.3s ease-out; /* Smooth transitions */
    background-attachment: fixed;
    min-height: clamp(240px, 50vh, 420px);
}

/* Specific Background Images */
.parallax-container-1 {
    background-image: url('/images/prom3.jpg');
}

.parallax-container-2 {
    background-image: url('/images/baddie.jpg');
}
.parallax-container-3 {
    background-image: url('/images/switz.jpg');
}


/* Overlay Text Styling */
.overlay-text {
    position: absolute;
    font-family: 'Great Vibes', cursive;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center; /* Center text alignment */
}
h3 {
margin-left: 10px;
}

.interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.interest-grid span {
  margin-left: 10px;
  margin-right: 10px;
  background: #fff5f8;
  border: 1px solid #f2d4df;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Lora', serif;
  font-weight: bold;
  font-size: 15px;
  display: block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.interest-grid span:hover {
  transform: translateY(-3px);
}


/* Media Query for Tablets and Smaller Screens */
@media screen and (max-width: 1024px) {
    .homepage-container {
        width: 80%; /* Adjust width for tablets */
    }

    .overlay-text {
        font-size: 30px; /* Reduce font size for better readability */
    }
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 768px) {
    .homepage-container {
        width: 95%; /* Take up more space on smaller screens */
    }

    .overlay-text {
        font-size: 24px; /* Adjust text size for mobile */
    }

    /* background-attachment: fixed is unreliable on mobile browsers (iOS Safari
       largely ignores it, and combined with overflow:hidden on an ancestor it
       often just fails to paint at all) - fall back to a normal scrolling
       background so the images actually show up. */
    .parallax-container-1,
    .parallax-container-2,
    .parallax-container-3 {
        background-attachment: scroll;
    }
}