html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--dislike--color: #fb4f68;--like--color: #4dca93}#card_container{position:relative;width:300px;height:400px}.card{-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:0 5px 15px #0000001a;position:absolute;width:inherit;height:inherit;background-color:snow;cursor:pointer;border-radius:.6rem}.card figcaption{filter:contrast(3);rotate:8deg;text-shadow:0px 0px 6px rgb(0,0,0);position:absolute;top:70%;left:50%;opacity:0;transform:translate(-50%,-50%);padding:0 2rem;border-width:3px;border-style:solid;border-color:transparent;border-radius:5%;font-size:3rem;font-family:Patrick Hand;line-height:125%;text-align:center;letter-spacing:.5rem}.card figcaption.like{border-color:var(--like--color);color:var(--like--color)}.card figcaption.like:after{content:"YEAH"}.card figcaption.dislike{border-color:var(--dislike--color);color:var(--dislike--color)}.card figcaption.dislike:after{content:"NOPE"}@keyframes addCard{0%{opacity:0;left:3rem}to{left:1.5rem;opacity:1}}#button_container{margin-top:1rem}#button_container button{background-color:transparent;border:none;font-size:2rem}.active{opacity:1;cursor:pointer}.active[data-btn-preference=like]{color:green}.active[data-btn-preference=dislike]{color:red}.deactive{opacity:.5;background-color:gray;color:#fff}body{overflow:hidden}main{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#6494ede2}#frame{display:flex;flex-direction:column;align-items:center}
