app.css

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{-webkit-text-size-adjust:100%;line-height:1.15}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;margin:0}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}.page{display:flex;flex-direction:column;font-family:Amatic SC,sans-serif;min-height:100vh;overflow-x:hidden}.header{position:absolute;width:100%;z-index:2}.header__h1{cursor:pointer;font-size:6rem;font-weight:300;line-height:.5;margin:5rem 0 0;text-align:center;transition:all .25s}.header__h1.in-game{font-size:3rem;margin-top:1rem}@media (max-width:425px){.header__h1{line-height:1;margin-top:1rem}}.main{background-image:linear-gradient(135deg,#eee,#ffe8fc 19%,#ffdded 39%,#ffd9c3 60%,#ffe391 80%,#f9f871);display:flex}.main,.main__container{flex-grow:1}.game{align-items:center;display:flex;height:100%;justify-content:center}.button{border:none;cursor:pointer;margin:0;padding:0;text-decoration:none}.game__menu{display:none;transition:all .5s}.game__button{background-color:#00c9b7;border-radius:10%;box-shadow:10px 10px 14px 1px rgba(0,0,0,.2);color:#fff;display:inline-block;font-size:2rem;height:60px;letter-spacing:.094em;text-align:center;transition:all .5s;width:60px}.game__button:hover{box-shadow:none}.game__button:first-child{margin-right:1.5rem}.game__button:after{color:#fff;content:attr(data-type);line-height:60px}.game__container{-webkit-perspective:1000px;display:none;flex-flow:row wrap;justify-content:space-between;padding:80px 0 70px;perspective:1000px;width:100%}.game__card{-webkit-transform-style:preserve-3d;border-radius:10%;box-shadow:10px 10px 14px 1px rgba(0,0,0,.2);cursor:pointer;flex:0 1 calc(25% - 40px);height:200px;margin:5px 20px 5px 0;position:relative;transform-style:preserve-3d;transition:all .25s}.game__card:hover{box-shadow:none}.game__card--0 .front-face,.game__card--1 .front-face{background-image:url(public/images/8cadee02ea3398bbbb9c5f96bf00d1a5.svg)}.game__card--2 .front-face,.game__card--3 .front-face{background-image:url(public/images/2151b5f2f00bf4c019545536cee86040.svg)}.game__card--4 .front-face,.game__card--5 .front-face{background-image:url(public/images/ccc89bfd2df6982e3f6595a380cd4108.svg)}.game__card--6 .front-face,.game__card--7 .front-face{background-image:url(public/images/663dd514158336aee9630414e5baed2b.svg)}.game__card--8 .front-face,.game__card--9 .front-face{background-image:url(public/images/5fcefcec2db51355d38df44a8f6b5b85.svg)}.game__card--10 .front-face,.game__card--11 .front-face{background-image:url(public/images/3997935c6b64bbcec6c27727358b068e.svg)}.game__card--12 .front-face,.game__card--13 .front-face{background-image:url(public/images/c19caed42e036899acc7fcb40b5852e7.svg)}.game__card--14 .front-face,.game__card--15 .front-face{background-image:url(public/images/9c04bdf266266757fef669a6f5bd3cf1.svg)}.game__card--16 .front-face,.game__card--17 .front-face{background-image:url(public/images/43770c791d5381d796d0501c6afcc8f1.svg)}.game__card--18 .front-face,.game__card--19 .front-face{background-image:url(public/images/2b20ba7dd6cb04cb9af9e559c0e0e967.svg)}.game__card.flip{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@media (max-width:768px){.game__card{flex:0 1 calc(33.33333% - 20px);height:150px;margin:10px}}@media (max-width:425px){.game__card{flex:0 1 calc(33.33333% - 20px);height:100px;margin-right:10px}}.back-face,.front-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10%;height:100%;position:absolute;width:100%}.back-face,.front-face{background-color:hsla(0,0%,93.3%,.4)}.front-face{-webkit-transform:rotateY(180deg);background-position:50%;background-repeat:no-repeat;background-size:50%;transform:rotateY(180deg)}.modal{-webkit-animation-duration:.25s;-webkit-animation-fill-mode:forwards;-webkit-animation-name:fade;align-items:center;animation-duration:.25s;animation-fill-mode:forwards;animation-name:fade;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;z-index:999}.modal__content{background-color:#fff;border-radius:10%;cursor:pointer;font-size:3rem;padding:10rem;position:relative;text-align:center}.modal__content:after{content:"\1F389"}.footer{background-color:#eee}.freeze{overflow:hidden}