html{font-family:sans-serif}body{margin:0;background:#333}main{min-height:100vh;display:grid;place-items:center}.tinder{display:grid;grid-template-areas:". counter ." "no question yes" ". uncertain .";gap:3rem;--animation-duration: 0}.tinder .counter{grid-area:counter}.tinder .question-card{grid-area:question;place-self:center}.tinder>button{place-self:center}.tinder button.no{grid-area:no}.tinder button.yes{grid-area:yes}.tinder button.uncertain{grid-area:uncertain}.results{display:flex;flex-direction:column;align-items:center;gap:3rem}.results>.mail-button{padding:1rem 1.5rem 1rem 1rem;display:flex;gap:.5rem;align-items:center;border-radius:2rem;color:#143700;background:#e3ffdfbf;text-decoration:none}.results>.mail-button>.material-symbols-rounded{font-size:24px;font-variation-settings:"wght" 500,"opsz" 24}.results .no-mail{display:grid;grid-template-areas:"hint copy" "text text";gap:.5rem}.results .no-mail>i{align-self:center;font-style:normal;color:#aaa}.results .no-mail>.copy-button{justify-self:end;background:transparent;border:none;color:#fffc;cursor:pointer}.results .no-mail .material-symbols-rounded{font-size:24px;font-variation-settings:"wght" 500,"opsz" 24}.results .no-mail>textarea{width:1200px;height:150px;padding:.5rem 1rem;resize:none;grid-area:text;background:#fffc}.question-card{max-width:300px;border-radius:1rem;background:#fff;box-shadow:0 8px 32px 16px #14141499;overflow:hidden;position:relative;transform-origin:bottom center;animation-duration:var(--animation-duration)}.question-card>img{width:100%;display:block}.question-card>h2{padding:1rem;margin:0;left:0;right:0;position:absolute;z-index:1;transform:translateY(-100%);font-size:1.5em;color:#fff;font-weight:400;background:linear-gradient(180deg,#0000,#000000e6 90%)}.question-card>p{padding:1.5rem;margin:0;font-size:1.25em}.question-card.enter{animation-name:enter;animation-delay:calc(var(--animation-duration) / 2);opacity:0;transform:scale(.9)}.question-card.fading-no{animation-name:no}.question-card.fading-yes{animation-name:yes}.question-card.fading-uncertain{animation-name:uncertain}.tinder>.counter{place-self:center;font-size:1.5em;font-weight:500;color:#fff}.tinder>button{width:38px;height:38px;padding:1rem;box-sizing:content-box;background:#fff;border:none;border-radius:calc(2rem + 38px);cursor:pointer}.tinder>button.no{color:#d51111;background:#ffdfdfbf}.tinder>button.yes{color:#449f0e;background:#e3ffdfbf}.tinder>button.uncertain{color:#9f8c0e;background:#fff5dfbf}.tinder>button>.material-symbols-rounded{font-size:38px;font-variation-settings:"wght" 400,"opsz" 38}@keyframes enter{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes no{0%{opacity:1;transform:rotate(0) translate(0)}to{opacity:0;transform:rotate(-10deg) translate(-150px)}}@keyframes yes{0%{opacity:1;transform:rotate(0) translate(0)}to{opacity:0;transform:rotate(10deg) translate(150px)}}@keyframes uncertain{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(150px)}}