/* Auto-generated styles.css */

.page-center-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    box-sizing: border-box;
    background-color: #ffffff;
}

.centered-image {
    width: clamp(30%, 50vw, 65%);
    height: auto;
    display: block;
    max-height: 75vh;
    border-radius: 12px;
}

.page-title {
    font-size: clamp(2.75rem, 7vw, 6.5rem);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.75em;
}

.body-content.aligned-left {
    font-size: clamp(1.75rem, 3.25vw, 3rem);
    line-height: 1.75;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem;
    text-align: left;
}

.footer {
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    color: #888;
    margin-top: 3em;
}

/* Custom Style Block */
/* 🌄 Top-level background and page container */
.defaultStyleTop {
background: #8D90CB url('../images/background.png') center center no-repeat;
background-size: 90% auto;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 0;
margin: 0;
}
/* 🖼️ Image container and image display */
.image-container {
position: relative;
display: inline-block;
width: clamp(30%, 50vw, 65%);
height: auto;
max-height: 85vh;
}
.centered-image {
width: 100%;
height: auto;
max-height: 85vh;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
border-radius: 12px;
}
/* 📝 Text block inside top section */
.defaultStyleTop .text-block {
max-width: 600px;
margin: 1em auto 0 auto;
text-align: left;
}
/* 🧭 Top bar layout and menu control */
.top-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
padding: 1rem;
background: transparent;
border-bottom: 1px solid #ccc;
}
.search-bar {
flex: none;
}
#menu-container {
flex-shrink: 0;
}
/* ⚠️ Error banner */
.error-banner {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
padding: 1rem;
margin: 1rem auto;
max-width: 800px;
text-align: center;
border-radius: 8px;
font-size: 1.25rem;
font-weight: 500;
}
.error-banner:empty {
display: none;
}
/* 🥚 Easter egg styling */
.egg {
position: absolute;
width: 32px;
height: auto;
font-size: 1.5rem;
padding: 0.25em 0.5em;
background: transparent;
border: none;
z-index: 100;
cursor: pointer;
animation: pulseStar 2s infinite;
transition: opacity 0.3s ease, transform 0.2s;
}
/* 🔒 Eggs start hidden and non-interactive */
a .egg.hidden-egg {
opacity: 0;
}
/* 🧠 Hovering the link reveals the egg and enables interaction */
a:hover .egg.hidden-egg {
opacity: 1;
}
/* 🌍 Quadrant-specific alignment */
/* Right-side eggs: align from right edge */
.egg-q1,
.egg-q4 {
transform: translateX(-100%);
}
/* Left-side eggs: no shift needed */
.egg-q2,
.egg-q3 {
transform: none;
}
/* ✨ Pulsing glow animation */
@keyframes pulseStar {
0%, 100% {
transform: scale(1);
opacity: 0.75;
}
50% {
transform: scale(1.3);
opacity: 1;
}
}
a {
display: inline-block;
}


/* Custom Style Block */
.defaultStyleBottom {
padding: 2em;
text-align: center;
background: #f9f9f9;
color: #888888;
}