@import url(https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap);.card{position:relative;transition:transform .5s ease-in;transform-style:preserve-3d}.card.is-flipped{transform:rotateY(180deg)}.card-face{width:100%;height:100%;position:absolute;border-radius:10px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card-face.is-front{background-color:#e2e3f5;color:#fff;transform:rotateY(180deg)}.card-face.is-back{background-color:#ff9d00;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='.05'%3E%3Ccircle fill='%23ff9d00' r='1800'/%3E%3Ccircle fill='%23fb8d17' r='1700'/%3E%3Ccircle fill='%23f47d24' r='1600'/%3E%3Ccircle fill='%23ed6e2d' r='1500'/%3E%3Ccircle fill='%23e35f34' r='1400'/%3E%3Ccircle fill='%23d85239' r='1300'/%3E%3Ccircle fill='%23cc453e' r='1200'/%3E%3Ccircle fill='%23be3941' r='1100'/%3E%3Ccircle fill='%23b02f43' r='1000'/%3E%3Ccircle fill='%23a02644' r='900'/%3E%3Ccircle fill='%23901e44' r='800'/%3E%3Ccircle fill='%23801843' r='700'/%3E%3Ccircle fill='%236f1341' r='600'/%3E%3Ccircle fill='%235e0f3d' r='500'/%3E%3Ccircle fill='%234e0c38' r='400'/%3E%3Ccircle fill='%233e0933' r='300'/%3E%3Ccircle fill='%232e062c' r='200'/%3E%3Ccircle fill='%23210024' r='100'/%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed;background-size:cover;color:#fff}.card-img{position:relative;width:90px;height:90px}.checkmark{position:absolute;width:20px;height:20px;right:3px;bottom:3px}@media screen and (max-width:480px){.card-img{width:48px;height:48px}}.modal{display:show;position:fixed;z-index:1;padding-top:250px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{background-color:rgba(13,20,44,.9);border-radius:10px;margin:auto;padding:20px;width:25%;font-size:25px;font-family:Zen Dots,cursive}@media screen and (max-width:600px){.modal{padding-top:180px}.modal-content{padding:10px;font-size:15px;width:50%}}.modal2{display:show;position:fixed;z-index:1;padding-top:190px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal2-content{text-align:left;background-color:rgba(13,20,44,.9);border-radius:10px;margin:auto;padding:20px;width:35%;font-size:18px;line-height:25px;word-spacing:.4em;font-family:Zen Dots,cursive}hr{height:2px;background-color:#6495ed;border:none}.credit{font-size:15px}.credit i{color:#f7486b}.credit a{color:#6495ed}.close{color:#fff;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#838383;text-decoration:none;cursor:pointer}@media screen and (max-width:480px){.modal2{padding-top:120px}.modal2-content{padding:10px;font-size:12px;width:60%;line-height:20px;word-spacing:.2em}}body{margin:0;padding:0;background-image:url(../img/bg2.782fe793.jpg);background-size:cover}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;color:#f5f5f5}h1{font-family:Zen Dots,cursive}h1 span{background-color:rgba(4,15,41,.9);border-radius:10px;border-top-right-radius:0;border-bottom-left-radius:0;padding:10px 20px}.game-board{display:grid;grid-template-columns:repeat(4,100px);grid-column-gap:24px;grid-template-rows:repeat(4,100px);grid-row-gap:24px;justify-content:center}.bar-anchor{padding:20px 10px;margin:10px 4px;color:#fff;font-family:Zen Dots,cursive;text-transform:uppercase;text-align:center;position:relative;text-decoration:none;display:inline-block;overflow:hidden}.bar-anchor span{background:rgba(0,0,46,.8);border-radius:10px;width:100%;position:relative;padding:10px 70px;transition:all .65s cubic-bezier(.77,0,.175,1)}.transition-bar{position:absolute;top:0;left:0;width:0;height:100%;background:#80ffd3;z-index:-1}.bar-anchor:hover .transition-bar{width:120%;left:110%;transition:all .65s cubic-bezier(.77,0,.175,1)}.shuffle-card-move{transition:transform .8s ease-in}@media screen and (max-width:480px){.game-board{grid-template-columns:repeat(4,55px);grid-column-gap:13px;grid-template-rows:repeat(4,55px);grid-row-gap:13px}}