@font-face{font-family:Mountains;src:url(./mountains-700-DMJf4AbR.woff2)format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Comic;src:url(./comic-neue-400-BdhG8RSD.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Comic;src:url(./comic-neue-700-NE4Vcoll.woff2)format("woff2");font-weight:700;font-display:swap}:root{--night:#0a2440;--night-2:#123a2c;--red:#e03131;--green:#2f9e44;--gold:#ffd43b;--cyan:#22b8cf;--pink:#f06595;--paper:#fffdf5;--ink:#22201c;--radius:18px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip}body{min-height:100vh;color:var(--ink);background-color:#0d3b23;background-image:url(./bg-tile-B-fB6Boa.svg);background-repeat:repeat;margin:0;font-family:Comic,Comic Sans MS,Trebuchet MS,sans-serif;font-size:18px;line-height:1.55;overflow-x:clip}#snow{pointer-events:none;z-index:90;width:100%;height:100%;position:fixed;inset:0}.decor{pointer-events:none;z-index:2;position:fixed;inset:0;overflow:hidden}.decor img{filter:drop-shadow(0 8px 18px #00000073);height:auto;position:absolute}.decor__holly{opacity:.9;width:168px;top:-46px;left:-74px;transform:rotate(-6deg)}.decor__tree{opacity:.9;width:116px;bottom:-6px;right:-52px;transform:rotate(7deg)}.decor__penguin{opacity:.9;width:104px;bottom:-4px;left:-34px;transform:rotate(-8deg)}.lights{border-top:3px solid #2c4a35;border-radius:0 0 50% 50%/0 0 30px 30px;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;gap:2px;padding:0 clamp(4px,2vw,24px);display:flex;position:absolute;top:6px;left:0;right:0}.lights span{aspect-ratio:1/1.35;width:clamp(10px,1.15vw,14px);color:var(--gold);box-shadow:0 0 9px 2px currentColor, 0 0 22px 6px color-mix(in srgb, currentColor 45%, transparent);background:radial-gradient(circle at 34% 26%,#ffffffe6 0 14%,#0000 55%),currentColor;border-radius:45% 45% 55% 55%;flex:0 auto;animation:1.4s infinite alternate blink;display:block;position:relative}.lights span:before{content:"";background:#2c4a35;width:2px;height:9px;position:absolute;bottom:100%;left:calc(50% - 1px)}.lights span:nth-child(3n+1){color:var(--red);margin-top:9px;animation-delay:.2s}.lights span:nth-child(3n+2){color:var(--green);margin-top:3px;animation-delay:.5s}.lights span:nth-child(4n+3){color:var(--cyan);margin-top:14px;animation-delay:.85s}.lights span:nth-child(5n+4){color:var(--pink);margin-top:6px;animation-delay:1.1s}@keyframes blink{0%{opacity:1}to{opacity:.28}}.hero{z-index:1;padding:clamp(56px,12vw,84px) 16px 0;position:relative}.hero__title{text-align:center;letter-spacing:.01em;color:#fff8e1;max-width:14ch;text-shadow:0 0 4px #fff, 0 0 18px #ffd43be6, 3px 4px 0 var(--red), 6px 8px 0 #00000059;margin:clamp(10px,3vw,24px) auto 0;font-family:Mountains,cursive;font-size:clamp(2.6rem,11vw,5.5rem);font-weight:700;line-height:1.05;animation:5s ease-in-out infinite wobble}@keyframes wobble{0%,to{transform:rotate(-1.4deg)translateY(0)}50%{transform:rotate(1.4deg)translateY(-4px)}}main{z-index:1;padding:clamp(28px,6vw,56px) 16px clamp(84px,16vw,124px);position:relative}.wishes{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(22px,4vw,40px) clamp(18px,3vw,32px);max-width:1180px;margin:0 auto;display:flex}.card{border-radius:var(--radius);background:var(--paper);max-width:400px;transform:rotate(var(--tilt));animation:.5s backwards pop-in;animation-delay:var(--delay);border:3px solid #2b2b2b;flex:300px;padding:18px 18px 22px;transition:transform .25s,box-shadow .25s;position:relative;box-shadow:0 0 0 5px #fff,0 0 0 8px #e031318c,10px 12px #00000059}.card:hover,.card:focus-within{transform:rotate(0)translateY(-6px)scale(1.02);box-shadow:0 0 0 5px #fff,0 0 0 8px #e03131d9,14px 18px #00000059,0 0 42px #ffd43b80}@keyframes pop-in{0%{opacity:0;transform:rotate(calc(var(--tilt) * 3)) scale(.9)}}.card:nth-child(3n+1){background:#fffbe9;box-shadow:0 0 0 5px #fff,0 0 0 8px #e031318c,10px 12px #00000059}.card:nth-child(3n+2){background:#eafaf1;box-shadow:0 0 0 5px #fff,0 0 0 8px #22b8cf99,10px 12px #00000059}.card:nth-child(3n+3){background:#fff0f5;box-shadow:0 0 0 5px #fff,0 0 0 8px #f0659599,10px 12px #00000059}.card:before{content:"";z-index:3;background:#ffffff8c;border-left:1px dashed #0000001f;border-right:1px dashed #0000001f;width:96px;height:26px;margin-left:-48px;position:absolute;top:-14px;left:50%;transform:rotate(-2.5deg);box-shadow:0 2px 4px #0000002e}.card:nth-child(2n):before{left:38%;transform:rotate(3deg)}.card__snow{pointer-events:none;z-index:4;filter:drop-shadow(0 2px #15344e47)drop-shadow(0 0 5px #15344e33);background:#f2f9ff;border-radius:50% 50% 10px 10px/100% 100% 10px 10px;height:16px;display:none;position:absolute;bottom:-8px;left:4px;right:4px}.card__snow:before,.card__snow:after{content:"";background:#f2f9ff;border-radius:50%;position:absolute;bottom:5px}.card__snow:before{width:46%;height:26px;left:6%}.card__snow:after{width:33%;height:17px;right:5%}.card--snowy .card__snow{display:block}.card--snowy:after{content:"";z-index:4;pointer-events:none;border-radius:var(--radius);filter:drop-shadow(0 1px 1px #15344e73);background:radial-gradient(closest-side,#fff 97%,#0000 100%) 14px 22px/9px 9px no-repeat,radial-gradient(closest-side,#eaf4ff 97%,#0000 100%) 34px 44px/6px 6px no-repeat,radial-gradient(closest-side,#fff 97%,#0000 100%) calc(100% - 22px) 30px/7px 7px no-repeat,radial-gradient(closest-side,#fff 97%,#0000 100%) calc(100% - 40px) 58px/5px 5px no-repeat;position:absolute;inset:0}.card__body{z-index:2;position:relative}.card__title{color:#1d3b2a;text-wrap:balance;margin:6px 0 4px;font-family:Mountains,cursive;font-size:clamp(1.5rem,5.4vw,1.9rem);line-height:1.15}.card__artist{letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0;font-size:.95rem;font-weight:700}.card__note{margin:6px 0 14px;font-size:1.02rem}.card__tag{color:#fff;background:var(--red);border-radius:999px;margin:10px 0 0;padding:3px 12px 4px;font-size:.92rem;font-weight:700;display:inline-block;transform:rotate(-1.5deg);box-shadow:2px 3px #00000040}.card__link{color:#fff;background:linear-gradient(#3bb75a,#24803c);border:3px solid #14301f;border-radius:12px;margin-top:4px;padding:9px 18px 10px;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-block;box-shadow:3px 4px #14301f}.card__link:hover,.card__link:focus-visible{transform:translate(1px,2px);box-shadow:2px 2px #14301f}.card__link:focus-visible{outline:3px dashed var(--gold);outline-offset:4px}.card--vinyl{padding-top:22px}.card__disc{--sleeve:min(72%, 236px);--disc:calc(var(--sleeve) * .97);--pull:8%;place-items:center;padding:14px 0 6px;display:grid;position:relative}.card__disc:before{content:"";width:var(--disc);aspect-ratio:1;transform:translateX(var(--pull));background:radial-gradient(circle,#b8a15c 0 6%,#111 6.5% 100%),repeating-radial-gradient(circle,#1a1a1a 0 1px,#0b0b0b 1px 3px);border-radius:50%;grid-area:1/1;animation:8s linear infinite spin;box-shadow:0 4px 12px #00000073}.card__disc:after{content:"";width:var(--disc);aspect-ratio:1;pointer-events:none;transform:translateX(var(--pull)) rotate(-90deg);background:linear-gradient(100deg,#0000 30%,#ffffff29 42%,#ffffff57 48%,#ffffff14 54%,#0000 66%);border-radius:50%;grid-area:1/1;animation:8s linear infinite spin-sheen}.card__cover{z-index:1;width:var(--sleeve);aspect-ratio:1;object-fit:cover;border:2px solid #111;border-radius:6px;grid-area:1/1;display:block;position:relative;box-shadow:5px 7px #0000004d}@keyframes spin{to{transform:translateX(var(--pull)) rotate(360deg)}}@keyframes spin-sheen{to{transform:translateX(var(--pull)) rotate(270deg)}}.card--vinyl:hover .card__disc:before,.card--vinyl:hover .card__disc:after{animation-duration:2.2s}.card__icon{width:64px;height:64px;margin:2px auto 6px;animation:2.6s ease-in-out infinite bob;display:block}.card__shot{place-items:center;padding:6px 0 10px;display:grid}.card__photo{aspect-ratio:1;object-fit:contain;background:#fff;border:2px solid #2b2b2b;border-radius:8px;width:min(88%,260px);transform:rotate(-1.6deg);box-shadow:4px 5px #00000047}@keyframes bob{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-5px)rotate(4deg)}}@media (width>=760px){.decor__holly{opacity:1;width:340px;top:-34px;left:-78px}.decor__tree{opacity:1;width:210px;bottom:-14px;right:-34px}.decor__penguin{opacity:1;width:186px;bottom:0;left:4px}.card{flex:0 340px}.card:nth-child(2n){margin-top:28px}.card:nth-child(3n){margin-top:12px}}@media (width<=400px){body{font-size:17px}.decor__holly{width:140px;top:-40px;left:-66px}.decor__tree{width:98px}.decor__penguin{width:88px}.card{transform:rotate(calc(var(--tilt) * .5))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.card{transform:none}}