* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/MOMCAKE-Bold.otf');
}

@font-face {
    font-family: 'CustomFont2';
    src: url('../fonts/Poison-Regular.otf');
}

@font-face {
    font-family: 'CustomFont3';
    src: url('../fonts/1.ttf');
}

@font-face {
    font-family: 'CustomFont4';
    src: url('../fonts/2.ttf');
}

@font-face {
    font-family: 'CustomFont5';
    src: url('../fonts/4.ttf');
}

@font-face {
    font-family: 'CustomFont6';
    src: url('../fonts/Blome.otf');
}

body {
    max-height: 220vh;
    margin: 0;
    background-color: rgb(255, 255, 255); /* Set background color to black */
}


/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo-image {
    height: 50px; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
    display: block;
    transition: transform 0.3s ease; /* Add smooth animation on hover */
}


/* Signature logo (top-left). The PNG has a lot of empty transparent space
   around the signature, so .sig crops to just the signature itself, then
   sizes and positions it from the window width: close to the edge on
   phones, a little further in on big screens. */
.sig {
    --logo-w: clamp(60px, 2vw + 50px, 95px); /* visible signature width */
    position: absolute;
    top: clamp(14px, 2vw, 40px);
    left: clamp(16px, 3vw, 58px);
    width: var(--logo-w);
    aspect-ratio: 671 / 398; /* shape of the signature inside the PNG */
    overflow: hidden;
    z-index: 15;
    transition: transform 0.3s ease; /* hover grow */
}
.sig:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}
/* The full PNG, scaled and shifted so only the signature shows */
.sig img {
    width: calc(var(--logo-w) * 3.6066); /* 2420 / 671 */
    height: auto;
    max-width: none;
    margin-left: calc(var(--logo-w) * -1.1177); /* -750 / 671 */
    margin-top: calc(var(--logo-w) * -0.4590); /* -308 / 671 */
    display: block;
}

.overlay-button {
    position: absolute;
    inset: 0; /* covers the whole signature */
    width: 100%;
    height: 100%;
    background-color: transparent; /* Invisible button */
    border: none;
    cursor: pointer;
    z-index: 999; /* Ensures the button is above the image */
    padding: 0; /* Removes any default padding */
    margin: 0; /* Removes any default margin */
}

.overlay-button:focus {
    outline: none;
}


.container5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px 20px;
    padding-bottom: 8vh; /* room for the last row of photos to grow on
                            hover without the page's scroll height jumping */
    overflow-anchor: none; /* belt-and-braces alongside the img rule below -
                               don't let the browser pick this section as a
                               scroll anchor when a photo inside it resizes */
}
.container5 .box {
    padding-top: clamp(70px, 12vh, 130px); /* Fluid, no breakpoint needed */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Columns reflow (3 -> 2 -> 1) as the viewport narrows,
                        instead of squeezing into unusably thin columns */
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    width: min(1200px, 92vw); /* Fluid, no breakpoint needed */
}
.container5 .box .dream {
    display: flex;
    flex-direction: column;
    flex: 1 1 min(260px, 100%); /* Grow/shrink; wraps once a column would be narrower
                         than ~260px, so 3 columns on a monitor collapse to
                         2 on a tablet and 1 on a phone automatically */
    max-width: 400px;
    margin-bottom: 20px;
}
.container5 .box .dream .image-container {
    /* Wraps the whole stack of photos, not one each, so it must NOT clip
       (overflow: hidden here would square off an individual photo's own
       rounded corners against this container's straight sides once that
       photo scales up on hover). Each photo rounds itself via its own
       border-radius below. */
}
.container5 .box .dream img {
    width: 100%; /* never changes, on hover or otherwise - see note below */
    border-radius: 9px;
    margin-bottom: 5%;
    display: block;
    cursor: pointer;
    object-fit: cover; /* only matters once js/gallery-hover.js sets an explicit
                           taller height on hover; harmless at rest since width
                           and natural height already match exactly */
    overflow-anchor: none; /* stop the browser auto-adjusting scroll position
                               to compensate for this element's height change -
                               that's what caused the jump near the bottom */
    transition: height 0.3s ease, filter 0.3s ease;
}

.container5 .box .dream img:hover {
    filter: brightness(0.85);
    /* Height (not transform/scale) is set precisely by js/gallery-hover.js,
       based on each photo's own rendered size. Because it's a real layout
       change and not a transform, flexbox naturally reflows and pushes the
       photos below down by exactly that amount - the margin-bottom gap never
       has to change. Width is never touched, so there's no risk of a photo
       spilling sideways into a neighboring column regardless of how tall
       and narrow it is. */
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox-overlay.show {
    display: flex;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 2vh;
    right: 3vw;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    line-height: 1;
}



/* Text for Google and screen readers only - not shown on screen */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}