@import"https://fonts.googleapis.com/css2?family=Oleo+Script:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700";.header{background-color:var(--medium);padding:1rem;display:flex;flex-direction:row;justify-content:center;align-items:center}.header .title{font-family:Oleo Script,sans-serif;color:var(--text);position:relative;font-size:3em;letter-spacing:5px;text-transform:uppercase;font-weight:900;padding-left:100px}.header .title:before{content:"";font-weight:400;color:var(--text);font-size:2.5em;position:absolute;transform:translate(-90%,-25%)}.card{width:120px;height:180px;background-color:var(--medium);display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:20px;transition:.5s;margin:30px;position:relative;cursor:pointer;animation:popUp .5s}.card.rotate{transform:rotate(360deg)}.card:after{content:"";position:absolute;border-radius:20px;width:87px;height:134px;border:7px solid var(--text);transition:.5s}.card .icon:before{font-family:cartitas;content:"";font-size:4em;color:var(--text)}.card .icon#cross:before{content:""}.card .icon#star:before{font-size:5em;content:""}.card .icon#wave:before{content:""}.card .icon#square:before{content:""}.card.shake{animation:shake .4s}.hand{display:flex;flex-direction:row;justify-content:center;align-items:center}.set{display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}.set:after{font-family:Oleo Script;font-weight:400;font-size:2em;content:"";position:absolute;color:#fff;left:100%;text-transform:uppercase;animation:pop .5s}.set#hit0:after{content:"0 Hits"}.set#hit1:after{content:"1 Hit"}.set#hit2:after{content:"2 Hits"}.set#hit3:after{content:"3 Hits"}.set#hit4:after{content:"4 Hits"}.set#victory:after{color:green;content:"Victory!"}.set#victory .symbol:before{color:green}.set#defeat:after{color:red;content:"Defeat!"}.set#defeat .symbol:before{color:red}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}.symbol{width:120px;height:120px;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:20px;transition:.5s;margin:30px;position:relative}.symbol:before{font-family:cartitas;content:"";font-size:7em;color:var(--light)}.symbol#question:before{content:""}.symbol#cross:before{content:""}.symbol#star:before{font-size:8em;content:""}.symbol#wave:before{content:""}.symbol#square:before{content:""}.symbol{animation:popUp 1.1s}.btn.restart{background-color:#ff0;border:5px solid yellow}.btn.restart:hover span{color:#ff0}.btn.restart:before{color:#ff0}.btn.restart:hover:before{content:"Restart";width:100%}.btn{position:relative;cursor:pointer;padding:15px 30px;border:none;border-radius:40px;font-size:2.5em;background-color:#adff2f;color:var(--text);border:5px solid greenyellow;outline:none}.btn span{transition:.5s;font-family:Oleo Script}.btn:before{color:#adff2f;content:"";font-family:Oleo Script;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:0;z-index:0;height:100%;background-color:var(--text);transition:.5s;border-radius:40px}.btn:hover span{color:var(--medium)}.btn:hover:before{content:"Guess";width:100%}.btn{animation:popUp .8s}.buttonContainer{display:flex;flex-direction:column;justify-content:center;align-items:center}.board{margin:0;padding:0;display:flex;flex-direction:column-reverse;justify-content:center;align-items:center}.warning{position:relative;margin:20px;font-size:2em;color:red;border:none;opacity:0;transition:.5s ease all}.fade-in{opacity:1;animation:fadeIn .5s}.attempts{font-size:2em;margin-top:40px;color:var(--light);animation:popUp .3s}.footer{width:100%;height:20vh;background-color:var(--light);display:flex;flex-direction:row;justify-content:space-around;align-items:center;position:relative}.footer .advice{font-size:2em;color:var(--text)}.footer .social{color:var(--text);padding-right:260px}.footer .social .social-icon{text-decoration:none;color:var(--text);font-size:2em;position:relative;display:flex;flex-direction:row;justify-content:space-between}.footer .social .social-icon span{position:relative}.footer .social .social-icon span:before{content:"";position:absolute;font-family:cartitas;font-size:2em;top:-30px;left:0}.footer .social .social-icon .github:before{content:""}.footer .social .social-icon .linkedin:before{content:"";left:105px}.footer .social .social-icon .personal:before{content:"";left:200px;top:-50px;font-size:3em}main{margin-top:70px;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:70px}@media screen and (max-width: 430px){.footer{flex-direction:column;height:20vh}.footer .advice{font-size:1.5em}.footer .social{padding-right:250px}.footer .social .social-icon span:before{top:-40px;font-size:1.5em}.footer .social .social-icon .personal:before{top:-60px;font-size:2.5em}main{width:100vw}.hand{width:100%;flex-wrap:wrap}.card{width:100px;height:150px;margin:20px}.board{width:100%}.card .icon:before{font-size:3.5em}.card .icon#star:before{font-size:4.3em}.card:after{width:80px;height:120px;border-width:5px}.set{width:100%;flex-wrap:wrap;margin-top:20px}.set:after{left:45%;top:-5%;font-size:1.5em}.symbol{width:100px;height:100px;margin:20px;font-size:1em}}@font-face{font-family:cartitas;src:url(../fonts/cartitas.eot?jjjdj7);src:url(../fonts/cartitas.eot?jjjdj7#iefix) format("embedded-opentype"),url(../fonts/cartitas.ttf?jjjdj7) format("truetype"),url(../fonts/cartitas.woff?jjjdj7) format("woff"),url(../fonts/cartitas.svg?jjjdj7#cartitas) format("svg");font-weight:400;font-style:normal;font-display:block}:root{--text:#053030;--text-light:#015958;--contour: #008F8C;--medium: #0CABA8;--light: #0FC2C0}*{font-family:Oleo Script,sans-serif;margin:0;padding:0}*:before,*:after{font-family:cartitas;transition:.5s ease all}body{background-color:var(--text)}@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}to{transform:rotate(-15deg)}}@keyframes popUp{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}