:root{--bg:#faf9f6;--screen:snow;--like:#1be4a1;--super:#2db1ff;--nope:#fd5068}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);place-items:center;min-height:100dvh;font-family:Roboto,system-ui,sans-serif;display:grid;overflow:hidden}.smartphone{border:8px solid #000;border-radius:15px;width:clamp(290px,49dvh,360px);height:clamp(580px,98dvh,720px)}.screen{background:var(--screen);border:2px solid #00000026;border-radius:7px;flex-direction:column;align-items:center;height:100%;display:flex;overflow:hidden}.deck{flex:1;width:99%;margin-top:4px;position:relative}.photo{color:#eee;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform;background:#d6d5d5 50%/cover no-repeat;border-radius:10px;align-items:flex-end;transition:transform .3s ease-out;display:flex;position:absolute;inset:0;box-shadow:0 2px 7px #888888b3}.photo.moving{cursor:grabbing}.photo.flying{pointer-events:none}.stamp{text-align:center;letter-spacing:.04em;opacity:0;pointer-events:none;border:5px solid;border-radius:8px;padding:.2rem .5rem;font-size:2.6rem;font-weight:700;line-height:1;position:absolute;top:8%}.stamp-like{color:var(--like);left:8%;rotate:-15deg}.stamp-nope{color:var(--nope);right:8%;rotate:15deg}.stamp-super{color:var(--super);font-size:2.2rem;top:auto;bottom:32%;left:50%;translate:-50%;rotate:-10deg}.personal{background:linear-gradient(#0000 0%,#00000069 24%);border-radius:10px;width:100%;padding:15px}.name-age{align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.name{font-size:2rem;font-weight:500}.age{font-size:1.6rem}.about{grid-template-columns:auto 1fr;align-items:center;gap:8px 6px;display:grid}.about svg{width:1rem;height:1rem}.commands{justify-content:space-around;align-items:center;width:100%;height:100px;display:flex}.command{cursor:pointer;background:#fff;border:none;border-radius:50%;place-items:center;width:60px;height:60px;transition:all .5s;display:grid;box-shadow:0 2px 6px #707d8624}.command.small{width:48px;height:48px}.command svg{stroke-width:2.5px;width:50%;height:50%;transition:all .5s}.command:is(:hover,:focus-visible){scale:1.1;box-shadow:0 2px 6px #707d8654}.command:is(:hover,:focus-visible) svg{scale:1.15}.nope{color:var(--nope)}.super{color:var(--super)}.heart{color:var(--like)}.super svg,.heart svg{fill:currentColor}@media (width<=600px){.smartphone{border:none;border-radius:0;width:100%;height:100dvh}}