@keyframes reject{50%{transform:translateX(-100vw);opacity:0}60%{transform:translateX(0)}98%{transform:translateX(0);opacity:0}99%{opacity:1}}@keyframes accept{50%{transform:translateX(100vw) translateY(0);opacity:0}60%{transform:translateX(0) translateY(0)}98%{transform:translateX(0) translateY(0);opacity:0}99%{opacity:1}}@keyframes intoView{0%{top:0;right:0;opacity:0}100%{top:-5px;right:-5px;opacity:1}}*{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:12px}@media screen and (min-width: 64em){html{font-size:18px}}body{background:#61577D url("../images/paw-print.svg");font-family:'Roboto', sans-serif;min-height:100vh}header{width:80%;margin:30px auto;color:#F1EFF6;display:flex;flex-direction:column;align-items:center}header h1{font-size:3em;font-family:'Gochi Hand', cursive;letter-spacing:0.2rem;text-align:center}header p{line-height:120%;letter-spacing:1px}main{min-height:300px;height:100%;width:80%;margin:0 auto;display:grid;align-items:center;justify-content:center}.title{font-size:3em;font-family:'Gochi Hand', cursive;letter-spacing:0.2rem;text-align:center;color:#F1EFF6}.cards{position:relative}.main-card{position:relative;background-color:#F1EFF6;min-height:200px;max-width:700px;height:100%;min-width:300px;width:100%;margin-bottom:10px;border-radius:20px;border:1px solid black;display:flex;flex-direction:column}.main-card img{border-radius:20px 20px 0 0;max-height:200px;max-width:600px;justify-self:center;align-self:center;object-fit:contain;background-color:#F1EFF6;min-height:150px;height:100%;width:100%;overflow:hidden}@media screen and (min-width: 64em){.main-card img{max-height:300px}}.main-card .text-area{padding:20px;display:grid;gap:10px;grid-template-columns:1fr 1fr;grid-template-rows:0.5fr 0.25fr 0.5fr 0.25fr 0.5fr 1fr;grid-template-areas:'name age' 'interest .' 'interestText interestText' 'about .' 'aboutText aboutText' 'noBtn yesBtn'}.main-card .text-area #accept-btn{grid-area:yesBtn;justify-self:flex-end}.main-card .text-area #reject-btn{grid-area:noBtn}.main-card .text-area h3{grid-area:name;font-family:'Gochi Hand', cursive;color:#61577D;font-size:1.5rem}.main-card .text-area .age{grid-area:age;font-family:'Gochi Hand', cursive;color:#61577D;font-size:1.5rem;justify-self:flex-end}.main-card .text-area .interests{grid-area:interest;font-size:1.2rem}.main-card .text-area .interest-text{grid-area:interestText}.main-card .text-area .about{grid-area:about;font-size:1.2rem}.main-card .text-area .about-text{grid-area:aboutText}.background-cards{position:absolute;z-index:-2;top:-10px;right:-10px;height:100%;width:100%;border-radius:20px}.background-cards .bg-card{height:100%;width:100%;background-color:#9892A8;border-radius:20px;position:absolute;top:0;right:0;z-index:-2;border:1px solid black}.background-cards .bg-card:first-of-type{position:absolute;top:5px;right:5px;height:100%;width:100%;z-index:-1;border:1px solid black}.background-cards .bg-card:last-of-type{position:absolute;top:-5px;right:-5px;height:100%;width:100%;z-index:-3;border:1px solid black}button{height:50px;width:50px;border:none}@media screen and (min-width: 48em){button{height:60px;width:60px}}button .accept-btn,button .reject-btn{display:flex;align-items:center;justify-content:center;object-fit:contain;height:100%;width:100%;font-size:2.5rem;background-color:#85B931;border-radius:50%;padding:15px}button .reject-btn{background-color:#E04040;color:#F1EFF6}.reject-click{animation:reject 500ms linear 1 forwards;animation-duration:500ms}.accept-click{animation:accept 500ms linear 1 forwards;animation-duration:500ms}.intoView-click{animation:intoView 500ms linear 1 forwards}