@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@700&display=swap');


:root {
    --bg-color: rgba(193, 210, 224, 1);
}

/* Default Styles for Roof Elements (Extracted from HTML) */
.roof-beam-top {
    width: 1292px;
    left: -136px;
}

.roof-beam-shadow {
    width: 1324px;
    left: -143.83px;
}

body {
    background-color: var(--bg-color);
    font-family: 'David Libre', serif;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent scrollbars from absolute elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 
   Artwork Container 
   This wraps the absolute positioned elements.
   We use container queries or simple transform scaling to make it fit.
   Since the artwork has negative coordinates and is distinct, we treat it as a fixed canvas.
*/
#artwork-container {
    position: relative;
    /* The artwork seems to span roughly from x=-200 to x=1200 (~1400px wide) and y=80 to y=850 (~800px high) */
    width: 1400px;
    height: 900px;
    flex-shrink: 0;
    /* Scale down if viewport is smaller */
    transform-origin: center center;
    transform: scale(min(1, min(calc(100vw / 1400), calc(100vh / 900))));
    direction: ltr;
    /* Force LTR to ensure absolute coordinates (left) work as intended */
    left: 100px;
    /* Manual offset to visually center the building */
}

/* White Horizontal Beams/Stripes */
.white-beam {
    position: absolute;
    width: 1085px;
    left: -150.83px;
    background: #FBFBFB;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    outline: 1.86px black solid;
    outline-offset: -0.93px;
    /* height and top are set inline per element */
}

/* Functional Buttons (Replacing the original boxes/text) */
.building-btn {
    box-shadow: 2px 3px 0px rgba(0, 0, 0, 0.49);
    text-align: right;
    position: absolute;
    background: #FBFBFB;
    border: 1.5px solid black;
    text-decoration: none;
    color: black;
    font-size: 22px;
    line-height: normal;
    letter-spacing: -0.05em;
    direction: rtl;

    /* Flexbox to center text exactly */
    /* Flexbox to center text exactly */
    display: flex;
    justify-content: flex-start;
    /* Aligns to right in RTL */
    align-items: center;
    padding-right: 15px;
    /* Add spacing from the right edge */
    text-align: right;
    box-sizing: border-box;
    /* Prevent padding from increasing width */

    /* Interactive States */
    transition: transform 0.1s ease, background-color 0.2s;
    cursor: pointer;
    z-index: 10;
    /* Ensure clickable */
}

.building-btn:hover {
    transform: scale(1.02);
    background-color: #fdfde0;
    /* Subtle highlight */
}

/* Main Title Style */
.main-title {
    margin: 0;
    color: #FBFBFB;
    font-size: 95.01px;
    font-family: 'David Libre', serif;
    font-weight: 700;
    -webkit-text-stroke: 1.2px black;
    letter-spacing: -0.09em;
    word-wrap: break-word;
    text-shadow: 1px 5px 1px rgba(0, 0, 0, 0.49);
    z-index: 5;
}

/* Shadow Overlay */
.shadow {
    z-index: 15;
    /* Above buttons (10) and title (5) */
    pointer-events: none;
    /* Allow clicks to pass through to buttons */
}

/* Ensure pillars and beams are on top of the shadow */
.floor-div,
div[style*="top: 673.08px"],
/* Floor div fallback */
div[style*="top: 692.03px"]

/* Floor shadow/detail */
    {
    z-index: 40 !important;
    /* Force top layer */
}

.piller,
.piller-left,
.piller-right,
.piller-right-deco,
/* Top Beams (approximate selector logic - ideally we should add classes to HTML) */
div[style*="top: 155px"],
div[style*="top: 176px"] {
    z-index: 25;
}

/* Ensure pillars stretch to bottom */
.piller-left,
.piller-right {
    height: 100vh !important;
}

/* Large Screen Responsiveness: Extend Elements & Align Design */
@media (min-width: 1140px) {

    /* 
       1. White Beams: Extend to left (infinite) but stop at right pillar
    */
    .white-beam {
        width: calc(150vw + 955px) !important;
        left: -150vw !important;
        right: unset !important;
    }

    /* Floor Top: Extend to left */
    .floor-top {
        width: calc(150vw + 1180px) !important;
        left: -150vw !important;
    }

    /* Roof Elements: Extend to left */
    .roof-grass {
        width: calc(150vw + 1133px) !important;
        left: -150vw !important;
    }

    .roof-beam-top {
        width: calc(150vw + 1156px) !important;
        left: -150vw !important;
    }

    .roof-beam-shadow {
        width: calc(150vw + 1180px) !important;
        left: -150vw !important;
    }


    /* 
       2. Pillars: Stretch downwards infinitely
    */
    .pillar-stretch {
        height: 300vh !important;
    }

    /* 
       Shift Left Pillar and Floor LEFT to create space for buttons.
       Original Left Pillar: ~86px. Target: -150px.
       Original Floor: ~53px. Target: -180px.
    */
    .floor-shadow {
        left: -150px !important;
    }

    .floor-div,
    .floor-mini-shadow {
        left: -180px !important;
        width: 1400px !important;
        /* Extend width to compensate */
    }

    /* 
       3. Roof: Extend to left but stop at floor div end
    */
    .roof-stretch {
        width: calc(150vw + 1195px) !important;
        left: -150vw !important;
    }

    /* 
       4. Buttons & Title: Retain original relative positions (ratio)
       The user requested that the layout in large screens mimics the layout in small screens,
       preserving the relative relationships.
       Therefore, we do not override button positions or the title position here.
    */

    /* Shift Right Pillar Shadows to match extended width */
    .piller-left+.pillar-stretch,
    .right-shadow {
        left: 1400px !important;
    }

    .right-deco-1,
    .right-deco-2 {
        left: 1358px !important;
    }
}

/* Mobile Layout (Smartphones) */
/* Mobile Layout (Smartphones) */
/* Mobile Layout (Smartphones) */
@media (max-width: 768px) {
    :root {
        --bg-color: #CBE7DC;
        /* Mobile background color */
    }

    html,
    body {
        overflow: hidden !important;
        /* Disable scrolling strictly */
        height: 100%;
        width: 100%;
        margin: 0;
    }

    body {
        align-items: flex-start;
        /* Align to top */
    }

    #artwork-container {
        height: 100vh;
        width: 100vw;
        left: 0;
        transform: none;
    }

    /* 
       Refined Layout Iteration 5:
       1. Z-Index Layering: Background (0) < Title (30) < Shadow (40) < Top Floor (50).
       2. Buttons: Restore original size/alignment (remove overrides), keep stack.
       3. Right Pillar: Behind Top Floor (20).
    */

    /* Hide Left Pillar related elements & Unrelated Bottom Shadows */
    .piller-left,
    .left-pillar-shadow,
    .left-pillar-top-deco,
    .unrelated-bottom-shadow {
        display: none !important;
    }

    /* Right Pillar: Peek from right, start lower */
    .piller-right {
        left: calc(100vw - 40px) !important;
        /* Peeking ~40px */
        top: 297px !important;
        /* Original top */
        min-height: 100vh !important;
        z-index: 20 !important;
        /* Behind Title (30) & Roof (50) */
    }

    /* Right Pillar SVG Decoration */
    .piller-right-deco {
        display: block !important;
        left: calc(100vw - 40px) !important;
        top: 320.08px !important;
        z-index: 21 !important;
        width: 144px !important;
        overflow: visible !important;
    }

    /* Top Floor Shadow: Above Title, Below Roof */
    .top-floor-shadow {
        display: block !important;
        left: -10vw !important;
        width: 120vw !important;
        top: 294.08px !important;
        z-index: 40 !important;
        /* Above Title (30), Below Roof (50) */
    }

    /* Restore Right Pillar Bottom Shadow & Position it */
    .right-pillar-bottom-shadow {
        left: calc(100vw - 40px) !important;
        top: 1010px !important;
        z-index: 10 !important;
        display: block !important;
    }


    /* Background Elements: Fill Screen */
    .white-beam {
        left: -10vw !important;
        /* Start off-screen left */
        width: 120vw !important;
        /* Cover screen */
        z-index: 0;
        /* Default */
    }

    /* Move Floor Elements */
    .floor-div,
    .floor-mini-shadow,
    .floor-shadow {
        left: -10vw !important;
        width: 120vw !important;
        top: 910px !important;
    }

    /* Roof Elements: Highest Layer */
    .roof-grass,
    .roof-beam-top,
    .roof-beam-shadow,
    .floor-top {
        left: -10vw !important;
        width: 120vw !important;
        z-index: 50 !important;
        /* Highest priority */
    }


    /* UI Elements */

    /* Reset left/transform for right alignment */
    .main-title,
    .building-btn {
        left: auto !important;
        transform: none !important;
        right: 80px !important;
        /* Maintain right positioning */
    }

    /* Title Position & Z-Index */
    .main-title {
        top: 330px !important;
        /* Position where it overlaps shadow area */
        font-size: 80px !important;
        z-index: 30 !important;
        /* Above Beams(0), Below Shadow(40) */
        white-space: nowrap;
        text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8);
        text-align: right !important;
    }

    /* Button Styling: Restore desktop look (remove overrides for size/align) */
    .building-btn {
        /* width: fit-content; REMOVED to allow original width */
        /* min-width: unset; REMOVED */
        /* text-align/justify REMOVED to restore original center/default */
        /* padding REMOVED */

        /* Just enforce position */
        position: absolute !important;
        /* Ensure absolute overrides static if any */
    }

    /* Buttons Stack */
    a[href="booklet_maker.html"] {
        top: 410px !important;
    }

    a[href="bookelt_murge.html"] {
        top: 480px !important;
    }

    a[href="file_marge.html"] {
        top: 550px !important;
    }

    a[href="resize_photo.html"] {
        top: 620px !important;
    }

    a[href="photos_on_grid.html"] {
        top: 690px !important;
    }

    a[href="contrast_maker.html"] {
        top: 760px !important;
    }
}