*,:after,:before{margin:0;padding:0;box-sizing:border-box}img{width:100%;max-width:100%}html{font-size:10px}body{background-color:#3d5afe;color:#fff}.container{width:100%;max-width:120rem;margin:0 auto;padding:0 1rem}.puzzle,.puzzle-wrapper{display:flex;justify-content:center}.puzzle{width:100%;max-width:55rem;box-shadow:0 1px 6px rgba(0,0,0,.75);align-items:center;flex-wrap:wrap;grid-gap:.3rem;padding:1rem;position:relative;z-index:0;border-radius:10px;overflow:hidden}.puzzle.game-completed{-webkit-animation:border .5s ease-in-out infinite;animation:border .5s ease-in-out infinite}.puzzle.game-completed:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#0c0d0e,#fff),linear-gradient(#3d5afe,#3d5afe),linear-gradient(#3d5afe,#3d5afe),linear-gradient(#3d5afe,#3d5afe);-webkit-animation:borderRotate 1s linear infinite;animation:borderRotate 1s linear infinite}.puzzle.game-completed:after{content:"";position:absolute;z-index:-1;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);background:#3d5afe;border-radius:5px}@-webkit-keyframes border{50%{box-shadow:0 0 10px #f5f5f5}to{box-shadow:0 1px 6px rgba(0,0,0,.75)}}@keyframes border{50%{box-shadow:0 0 10px #f5f5f5}to{box-shadow:0 1px 6px rgba(0,0,0,.75)}}@-webkit-keyframes borderRotate{to{transform:rotate(1turn)}}@keyframes borderRotate{to{transform:rotate(1turn)}}.cell{flex:0 1 calc(20% - 0.3rem);display:flex}.cell:not(.empty){box-shadow:0 1px 6px rgba(0,0,0,.75)}.cell:not(.empty).verified-cell{position:relative}.cell:not(.empty).verified-cell:after{position:absolute;content:"✔";top:0;right:0;font-size:1.5rem;font-weight:900;color:#3d5afe;padding:0 .3rem;background:#fff}.game-status-wrap{margin:1rem 0 2rem;display:flex;grid-gap:1.5rem;justify-content:center;font-size:2rem}.border-indigo{border:3px solid rgba(61,90,254,.5)}.game-status{display:flex;align-items:center;flex-direction:column}.game-status span{min-width:10rem;margin-top:.5rem;padding:0 1rem;text-align:center;border-radius:.6rem;font-size:2.5rem;box-shadow:0 1px 6px rgba(0,0,0,.75)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:all .3s ease-out}.modal.open{visibility:visible;opacity:1}.modal.open .modal-content{transform:translateY(0)}.modal-content{width:80%;max-width:100rem;margin:8rem auto 0;border-radius:.6rem;background-color:#3d5afe;border:.6rem solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.75);transition:all .3s ease-out;transform:translateY(-100rem)}.modal-header{padding:1rem;display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:2rem;font-weight:500}.close{cursor:pointer;font-size:3rem}.modal-body{padding:2rem 1rem;border-top:1px solid #bbc0c4;border-bottom:1px solid #bbc0c4;font-size:2rem;text-align:center}.modal-body p{padding:3rem 5rem}.btn,.modal-footer{padding:1rem;display:flex;justify-content:center}.btn{outline:none;border:none;text-align:center;font-size:1.5rem;border-radius:.3rem;transition:all .5s;background-color:#fff;color:#3d5afe;align-items:center;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.75)}.btn:hover .btn-arrow{padding-left:1rem}.btn-arrow{width:2.5rem;transition:all .3s ease-in-out}.progress-bar{width:100%;max-width:55rem;margin:0 auto 2rem;background:#fff;border-radius:.6rem;box-shadow:0 1px 6px rgba(0,0,0,.75);height:1.8rem;border:1px solid #fff;position:relative;display:flex;align-items:center}.filled-area{width:25rem;height:1.2rem;background:#4caf50;border-radius:inherit;transition:width .3s ease-in-out}.progressbar-percent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#0c0d0e;font-size:1.4rem;font-weight:700}.btn-start{margin:0 auto 2rem;padding:1rem 4rem;border-radius:6rem}.flip-list-move{transition:transform .3s}@media screen and (max-width:600px){.container{display:flex;flex-direction:column}.puzzle-wrapper{order:1;margin-top:2.5rem}.game-status-wrap{order:2;margin:1.5rem 0 0;flex-wrap:wrap}.btn-start,.progress-bar{order:3;margin-top:2rem}.game-status{flex-basis:40%}}@media screen and (max-width:450px){.cell:not(.empty).verified-cell:after{font-size:1rem}}