*{margin:0;padding:0;color:whitesmoke;font-family:'Roboto',sans-serif}body{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden}.greyHUD{background-color:rgba(122,122,122,0.658);border-radius:10px;box-shadow:0 5px rgba(51,51,51,0.658)}#previewMsg,#minimalMoves{box-sizing:border-box;text-transform:uppercase;padding:10px;font-weight:600}#previewMsg{width:300px;margin-right:5px;border-radius:10px 0 0 10px}#minimalMoves{width:200px;border-radius:0 10px 10px 0}#minimalMoves::before{content:"required moves: "}#stats{width:100%;padding:20px 0;margin:0 100px 30px 100px;display:flex;justify-content:center}#stats>div{box-sizing:border-box;width:245px;height:34px;line-height:34px;text-align:center;font-size:20px;letter-spacing:2px;font-weight:900}#moves{margin-right:5px;border-radius:10px 0 0 10px}.moves::before{content:"Moves : "}.movesLeft::before{content:"Moves left: "}#timer{width:250px;border-radius:0 10px 10px 0;display:flex;justify-content:center}#timer div{box-sizing:border-box;width:45px;height:100%}#seconds{margin-left:6px}#minutes::after,#seconds::after{position:relative;box-sizing:border-box;height:100%;content:":";margin-left:10px;bottom:2px}#trophy{margin-left:6px;border-radius:0 10px 10px 0;display:none;right:200px;top:190px;font-size:20px;height:27px;width:35px;padding-top:7px;text-align:center}#board{width:95vw;height:95vw;max-width:300px;max-height:300px;display:flex;position:relative;z-index:0;flex-wrap:wrap;margin:0 auto}#preview{position:absolute;width:100%;height:100%;z-index:10}.wrongOrder{box-shadow:0 0 20px 20px black}.correctOrder{box-shadow:0 0 22px 5px #f12e6d}.gameOverOrder{box-shadow:0 0 20px 20px red}#bestTimes{position:absolute;margin-left:100px;height:205px;padding:5px;right:calc(50% - 590px);top:calc(50% - 205px)}#deleteTimes{position:absolute;font-size:20px;right:15px;top:45px;transition:transform .4s ease}#deleteTimes:hover{transform:scale(1.5);cursor:pointer}#deleteTimes:active{transform:scale(1.3)}#bestTimesLists{width:130px;height:205px;margin:0 auto;display:flex;overflow:hidden;position:relative}.bestTimesList{margin:0 auto;width:100px;padding-left:15px;padding-right:15px;position:absolute;transition:left .3s linear}#bestTimes h1{text-align:center}#bestTimes h2{text-align:center;width:100px}#bestTimes ul{counter-reset:list;text-align:center;list-style-type:none;margin-top:3px;letter-spacing:2px}#bestTimes ul li::before{counter-increment:list;content:counter(list) ". ";line-height:1.7em;margin-right:2px}.flashingTime{border-radius:10px;background-color:rgba(255,255,255,0.815);animation:flashing 2s ease infinite}@keyframes flashing{0%{background-color:rgba(255,255,255,0.815)}50%{background-color:rgba(255,255,255,0)}}.bestTimeBtnContainer{top:75px;height:130px;width:55px;position:absolute;cursor:pointer}.bestTimeBtnContainer:last-child{right:0}.bestTimesLvlChange{position:absolute;font-size:40px;top:45%;width:20px;height:20px;transform:rotate(-45deg)}.bestTimeBtnContainer:hover>span{animation:animate 1s linear infinite}#bestTimesLess{left:50%;border-left:5px solid whitesmoke;border-top:5px solid whitesmoke;z-index:1}#bestTimesMore{right:50%;border-right:5px solid whitesmoke;border-bottom:5px solid whitesmoke}@keyframes animate{50%{transform:translateX(5px) rotate(-45deg)}}#input-container{padding-top:30px;width:100%}#input{width:160px;border-radius:10px;display:flex;margin:0 auto}.input-btn{width:50px;height:50px;text-align:center;line-height:50px;font-size:30px;font-weight:900;border:0;cursor:pointer;transition:background-color .3s ease;-webkit-user-select:none}.input-btn:hover{background-color:#7f8f9b}.input-btn:active,#nextBtn button:active{transform:translateY(5px)}#less{border-radius:10px 0 0 10px}#more{border-radius:0 10px 10px 0}#level{width:60px;background-color:rgba(255,255,255,0.658);border:0;outline:0;height:50px;font-size:20px;text-align:center;color:black;font-weight:600}#nextBtn,#strictModeBtn{width:190px;height:50px;margin-top:20px;margin-left:15px;margin-right:15px}button{width:100%;height:100%;border:0;outline:0;font-size:20px;letter-spacing:2px;font-weight:900;transition:background-color .3s ease-in-out;cursor:pointer}#nextBtn button:hover,#strictModeBtn button:hover{background-color:#7f8f9b}.flash{background-color:#7f8f9b}.strictModeOn{transform:translateY(5px);box-shadow:none;background-color:#7f8f9b}.img{background-repeat:no-repeat;box-sizing:border-box;transition:transform .3s ease}.dragEnter{transform:scale(0.95)}.wrongOrder .img:hover{cursor:grab;transform:scale(0.97);border:1px dotted grey}.img:active{cursor:grabbing}footer{position:fixed;bottom:0;width:100vw;padding:2px 0 2px 100px;font-size:.6em}@media only screen and (max-width:1200px){#stats>div{width:225px}#timer{border-radius:0}#bestTimes{display:none;position:fixed;right:calc(-250px+50vw);top:calc(-355px+50vh);background-color:rgba(122,122,122,0.858);overflow:hidden}#trophy{display:block;cursor:pointer}#trophy:hover{background-color:#7f8f9b}}@media only screen and (max-width:550px){#previewMsg,#minimalMoves{font-size:.6em;padding:0 .9em;font-weight:400;letter-spacing:.1em}#stats{margin:0 0 10px 0;padding:10px 0 20px 0}#stats>div{height:1em;line-height:1em;font-size:.9em}#trophy{font-size:.8em;padding:0;height:15px;line-height:15px}#bestTimes{height:50px;top:30px;right:0;font-size:.7em}#deleteTimes{font-size:1.3em;top:25px}#bestTimesLists{height:130px}#bestTimes h1{font-size:1em;margin-bottom:5px}#bestTimes h2{font-size:1em}.bestTimeBtnContainer{top:50px;height:80px;width:30px}.bestTimesLvlChange{font-size:10px;width:10px;height:10px;top:50%}#bestTimesLess,#bestTimesMore{border-width:2px}#nextBtn,#strictModeBtn{width:calc(45vw);margin:10px 5px}body{overflow:scroll}}