*{margin:0;padding:0;box-sizing:border-box;font-family:Rubik,sans-serif;color:#0f0f0f}body{background-color:#eff1cc}.container{padding:0 .5rem;max-width:700px;margin:0 auto}.hero{background-image:url(/gift-box.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;min-height:40vh;padding:10vh 0;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero__title{text-align:center;font-weight:700;font-size:clamp(2rem,5vw,5rem);text-transform:uppercase;text-wrap:pretty}.hero__subtitle{text-align:center;font-weight:500;text-wrap:pretty;font-size:clamp(1rem,2.5vw,1.6rem);margin-top:.5rem}.gift-selector{margin-top:3rem}.gift-selector__title{font-weight:500;font-size:1.3rem;text-wrap:pretty}.gift-selector__title__hint{font-weight:700;text-transform:uppercase;color:#ad7805}.gift-selector__subtitle{text-wrap:pretty;margin-top:.8rem;font-size:.9rem}.gift-selector__list{display:grid;grid-template-columns:1fr 1fr;gap:2rem;list-style:none;max-width:400px;margin:2rem auto 0}.gift-selector__list__button{border:none;padding:.5rem;cursor:pointer;background:transparent}.gift-selector__list__button:hover{animation:pickMe .5s ease-in-out infinite alternate}.gift-selector__list__gift{width:100%}.gift-selector__list__gift.gift-selector__list__gift--pickMe{animation:pickMe .5s ease-in-out infinite alternate}.gift-selector__list__gift.gift-selector__list__gift--floating{--delay: 0;animation:floatingGift 1.5s ease-in-out var(--delay) infinite alternate}.gift-selector__list__gift.gift-selector__list__gift--open{animation:openGift 3s ease-in-out infinite}.opened-gift{transform:translate(-100%);animation:showGift .8s ease-in-out .5s both;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#d1ac5b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}.opened-gift__ring{display:block;width:16px;height:16px;border:3px solid currentColor;border-top-color:transparent;border-radius:100%;animation:ring 2s linear infinite;margin:.5rem auto 0}.opened-gift__title{font-size:1.3rem}.opened-gift__coupon{display:block;padding:.5rem;border:2px dashed currentColor;border-radius:.2rem;width:100%;margin:.8rem 0;text-align:center}.opened-gift__coupon-description{font-weight:500}@keyframes ring{0%{rotate:0deg}to{rotate:360deg}}@keyframes showGift{0%{transform:translate(-100%);scale:0;opacity:0}to{transform:translate(0);scale:100%;opacity:1}}@keyframes floatingGift{0%{transform:translateY(-10%)}to{transform:translateY(0)}}@keyframes pickMe{0%{transform:rotate(10deg)}to{transform:rotate(-10deg)}}@keyframes openGift{0%{scale:100%}50%{scale:200%}to{opacity:0}}
