:root{--navy:#000040;--navy-800:#1e3a8a;--fade-delay:3s;--fade-duration:3s}*,:before,:after{box-sizing:border-box}html,body{background:#111827;height:100%;margin:0;font-family:Arial,Helvetica,sans-serif}.hero{text-align:center;opacity:.9;justify-content:center;align-items:center;min-height:100dvh;display:flex;position:relative;overflow:hidden}.photo{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.photo-first{animation:fadeOut var(--fade-duration) ease-in-out var(--fade-delay) forwards}.photo-second{opacity:0;animation:fadeIn var(--fade-duration) ease-in-out var(--fade-delay) forwards}.tint{opacity:.1;background:#111827;position:absolute;inset:0}.logo{z-index:2;line-height:0;display:block;position:absolute;top:1rem;left:1rem}.content{z-index:1;flex-direction:column;align-items:center;padding:0 1rem;display:flex;position:relative}.names{color:var(--navy-800);animation:textToWhite var(--fade-duration) ease-in-out var(--fade-delay) forwards;margin:0;font-family:Ephesis,cursive;font-size:clamp(4.5rem,16vw,8rem);font-weight:400;line-height:1}.date{color:var(--navy);background:#f9fafb;border-radius:9999px;margin:5rem 0 0;padding:1rem 1.75rem;font-size:1.25rem;font-weight:300}@media (width>=640px){.date{font-size:1.5rem}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes textToWhite{0%{color:var(--navy-800)}to{color:#fff}}@media (prefers-reduced-motion:reduce){:root{--fade-duration:10ms}}