/* ============================= */ /* ON THIS DAY HISTORY SECTION */ /* ============================= */ .history-section { text-align: center; color: #ffffff; } .history-wrapper { width: 100%; max-width: 1050px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .history-kicker { font-family: 'Space Mono', monospace; font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: #ffffff !important; opacity: 0.8; } .history-title { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 900; color: #ffffff !important; text-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 0 45px rgba(255, 77, 90, 0.5); } .history-date { font-family: 'Space Mono', monospace; font-size: 1rem; color: #ffffff !important; opacity: 0.9; margin-bottom: 15px; } .history-cards { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; } .history-card { min-height: 250px; padding: 25px 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: rgba(20, 0, 5, 0.75); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(255, 50, 70, 0.12); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .history-card:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 50, 70, 0.25); } .history-year { font-family: 'Space Mono', monospace; font-size: 1.15rem; font-weight: 700; color: #ffffff !important; margin-bottom: 12px; } .history-event { font-size: 1rem; line-height: 1.6; color: #ffffff !important; opacity: 0.95; } .history-comment { margin-top: auto; padding-top: 18px; font-size: 0.85rem; line-height: 1.4; color: #ffffff !important; opacity: 0.65; font-style: italic; } .history-loading { color: #ffffff !important; font-family: 'Space Mono', monospace; font-size: 0.9rem; padding: 30px; } .history-link { color: #ffffff !important; text-decoration: none; } .history-link:hover { text-decoration: underline; } .history-scroll-hint { margin-top: 20px; color: #ffffff !important; font-size: 0.9rem; opacity: 0.7; animation: bouncePrompt 2s infinite ease-in-out; } @media (max-width: 850px) { .history-title { font-size: 2.2rem; } .history-cards { grid-template-columns: 1fr; max-width: 550px; } .history-card { min-height: auto; } }

Who is the birthday star? 👑