:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{margin:0;min-width:320px;min-height:100vh}.app{column-count:4;column-gap:1rem;overflow:hidden;break-inside:avoid}@media(max-width:3000px){.app{column-count:3}}@media(max-width:2000px){.app{column-count:2}}@media(max-width:768px){.app{column-count:1}}.card{perspective:1000px;cursor:pointer;aspect-ratio:var(--card-ratio, 5 / 7);--card-ratio: 5 / 7;flex:1 1;box-sizing:border-box;flex-grow:0;padding:10px;position:relative;z-index:2}.sub-cards{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;padding-left:20px;padding-right:20px;padding-top:10px;justify-content:center}.sub-card img{width:100%;height:auto;display:block;object-fit:cover}.card-copy{text-align:justify;padding:20px}.card.landscape{--card-ratio: 7 / 5}.card-inner{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}.card.is-selected .card-inner{transform:rotateY(180deg)}.card-front,.card-back{overflow:hidden;position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.card-inner img{max-width:100%;max-height:100%;object-fit:cover;display:block;overflow:hidden}.card-front{background:transparent;color:#fff;transition:transform .2s ease,box-shadow .2s ease}.card-back{background:transparent;transform:rotateY(180deg);height:100%}.card.is-selected{animation:pop .4s ease-out}.card-hover{position:absolute;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}.card-year{color:#fff;letter-spacing:.12em;opacity:0;transition:opacity .35s ease,transform .35s ease;font-family:Lobster,cursive;text-align:center;font-size:30px;margin-bottom:0;margin-top:0;text-shadow:2px 5px 5px rgba(0,0,0,.356)}.card:hover .card-hover{opacity:1}.card:hover .card-year{opacity:1;transform:translateY(0) scale(1)}h1{font-family:Lobster,cursive;text-align:center;font-size:50px;text-shadow:2px 5px 5px rgba(0,0,0,.356)}h3{font-family:Lobster,cursive;text-align:center;font-size:30px;margin-bottom:0;margin-top:0;text-shadow:2px 5px 5px rgba(0,0,0,.356);letter-spacing:.12em}.rainbow-b{background:linear-gradient(90deg,red,orange,#ff0,green,#0ff,#00f,violet,red);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow-shift 3s linear infinite}.text-divider{text-align:center;margin:4rem 0;font-size:.95rem;letter-spacing:.18em;color:color-mix(in srgb,currentColor 65%,transparent);color-scheme:light dark}.text-divider:before,.text-divider:after{content:"";display:block;width:120px;height:1px;margin:1.5rem auto;background-color:currentColor;opacity:.35}.card-front.animate-once{animation:selectableHint 1.2s ease-out forwards}.mobile-instruction{font-size:.9rem;text-align:center;margin-top:.25rem;margin-bottom:1rem;color:#ffffffbf}@keyframes rainbow-shift{0%{background-position:0% 50%}to{background-position:400% 50%}}@media(max-width:768px){.card{width:100%;height:100%;flex:1 1 100%}.card img{background-size:contain}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1)}to{transform:scale(1)}}@keyframes selectableHint{0%{transform:scale(1);box-shadow:0 0 #0000}50%{transform:scale(1.03);box-shadow:0 8px 20px #00000040}to{transform:scale(1);box-shadow:0 0 #0000}}
