body {
    background-color: black;
    color: #efbc2d;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* prevent horizontal scroll, allow vertical scrolling */
    font-family: 'Libre Baskerville', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* small logo / flicker image sizing */
#flickeringImage { width: clamp(120px, 40vw, 420px); height: auto; display:block; margin: 0 auto; }

/* title image: full-width on small screens, centered; constrained height on large screens */
#title-image { display:block; width:100%; max-width:95%; height:auto; object-fit:contain; margin: 0 auto 8px; }

@media (min-width: 1025px) {
    /* On desktop, don't allow the title to grow so tall it forces vertical overflow */
    #title-image { width: auto; max-width: 720px; max-height: 40vh; }
}

/* accessibility helper: visually hide but keep available to screen readers */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

.flicker { animation: flicker 50s infinite; }

@keyframes flicker { 0%{opacity:1} 50%{opacity:0.05} 100%{opacity:1} }

#content { padding: 20px; font-size: clamp(14px, 2.4vw, 20px); line-height: 1.6; display:flex; justify-content:center; align-items:center; }

#holder { display:flex; flex-direction:column; align-items:center; gap:12px; padding: 12px; box-sizing: border-box; }

/* Main page title */
#main-title { font-size: clamp(24px, 6vw, 48px); margin-bottom: 8px; color:#efbc2d; text-align:center; }

#clickme { color: #efbc2d; background-color: black; border: 1px solid #efbc2d; font-size: 1rem; cursor: pointer; margin-top: 0.5em; border-radius: 20px; min-width: 160px; max-width:1024px;}

#clickme:hover { color:black; background-color:#efbc2d; border:1px solid black; }

.button::after { content: "TENEBRAE"; }
.button:hover::after { content: "LUX"; }

#message { color: gold; font-size: clamp(20px, 5.5vw, 36px); text-align:center; transition: opacity 1s ease-in-out; margin-top: 8px; }


@media (max-width: 1024px) {
    body { overflow:auto; }
    #holder { gap:8px; }
    #flickeringImage { width: clamp(120px, 48vw, 360px); }
    /* ensure title fills available width on tablets/phones */
    #title-image { width:100%; max-width:100%; }
    #clickme { min-width: 50%; width:100%;}
    /* larger messaging on tablet widths */
    #message { font-size: clamp(28px, 8.5vw, 56px); }
    #main-title { font-size: clamp(28px, 7.5vw, 56px); }
}

@media (max-width: 420px) {
    /* make texts very large on small phones and allow wrapping */
    #main-title { font-size: clamp(28px, 12vw, 56px); }
    #clickme { min-width: 120px; padding: 8px 12px; width:75%}
    #message { font-size: clamp(32px, 16vw, 88px); line-height: 1.05; }
}

.fade-in { opacity: 1; }
.fade-out { opacity: 0; }