@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap);body{background:#eee;overflow:hidden;font-family:Montserrat,sans-serif;display:flex;flex-direction:column;width:100%;min-height:100vh}*,:after,:before{box-sizing:border-box;margin:0;padding:0}#app{position:fixed;min-height:100vh;top:0;left:0;overflow-y:scroll}#app,.container{width:100%;height:100%}.container{display:block;position:relative;min-height:calc(100vh - 50px)}.startBG{background:linear-gradient(#aa076b,#61045f)}.sequenceBG{background:linear-gradient(#5433ff,#20bdff,#a5fecb)}.sortBG{background:linear-gradient(#ffc837,#ff8008)}.loseBG{background:linear-gradient(#eb3349,#f45c43)}.winBG{background:linear-gradient(#1d976c,#93f9b9)}.screen{position:relative;flex-direction:column;width:960px;max-width:100%;height:auto;min-height:100%;margin:0 auto}.start{display:flex;top:-2px}.start .logo{max-width:720px;margin:0 auto}.start .logo img{position:relative;width:106%;left:-3%}.start .douche{top:-50px;width:100%;max-width:600px}.start .douche,.start .douche img{position:relative;display:block;margin:0 auto}.start .douche img{width:380px;max-width:50%}.start .copy{width:330px;color:#fff;text-align:center;margin:0 auto;position:relative;top:-40px}.start .copy h2{font-weight:700;font-size:24px}.start .copy p{font-weight:400;font-size:16px;line-height:1.2}.start .btn{position:relative;width:260px;margin:0 auto;cursor:pointer}.start .btn img{width:100%}.sequence .levelContainer{padding:20px 5px}.sequence .progressBar{position:relative;display:flex;flex-direction:row;width:100%;height:5px;margin:0 auto;align-items:flex-start;justify-content:space-between}.sequence .outer{position:relative;height:3px;border-radius:50px;background:#20bdff;width:100px;margin:5px}.sequence .inner{position:relative;height:3px;border-radius:100px;background:#fff;width:0}.sequence .levelID{color:#fff;font-weight:700;font-size:14px;letter-spacing:5px;text-transform:uppercase}.sequence .wordContainer{width:100%;height:100%;display:flex;flex-direction:column}.sequence .wordContainer,.sequence .wordID{position:absolute;align-items:center;justify-content:center}.sequence .wordID{color:#fff;text-align:center;font-size:60px;font-weight:700;align-content:center;opacity:0;visibility:hidden}.sort .sortInstructions{text-align:center;position:relative;margin:20px auto}.sort .sortInstructions p{line-height:1.2}.sort .sortContainer{position:relative;display:block;width:80%;height:auto;margin:0 auto;opacity:0;visibility:hidden;cursor:move}.sort .sortContainer .list-item{position:absolute;top:0;left:0;height:50px;width:100%}.sort .sortContainer .item-content{height:100%;border-radius:10px;color:#fff;line-height:50px;padding-left:15px;font-size:16px;font-weight:700;background-color:#000;border:0 solid hsla(0,0%,48.2%,.498039);box-shadow:0 1px 2px 0 rgba(0,0,0,.2)}.sort .doneBtn{display:block;position:relative;width:260px;margin:40px auto;cursor:pointer}.sort .doneBtn img{width:100%}.score{display:flex;flex-direction:column}.score .level{max-width:720px;margin:0 auto}.score .level h1{position:relative;color:#f4b7ad;font-weight:700;font-size:14px;letter-spacing:5px;text-transform:uppercase;margin:20px 0 5px 0}.score .level h1:after{position:absolute;content:"";height:3px;bottom:-15px;margin:0 auto;left:0;right:0;width:25%;border-radius:12.5%;background:#f4b7ad}.score .user-score{max-width:720px;margin:0 auto}.score .user-score p{position:relative;color:#fff;font-weight:700;font-size:16px;letter-spacing:1px;margin:20px 0 5px 0;text-align:center}.score .score-box{width:191px;height:190px;position:relative;display:flex;background-image:url(../img/scorebox.45cf8b9e.svg);background-size:contain;margin:20px 0;flex-direction:column;text-align:center;justify-content:center;align-items:center}.score .score-box .number{font-size:48px;font-weight:900;color:#000}.score .score-box .outof{font-size:18px;font-weight:700;color:#eb3349}.score .copy{max-width:500px;margin:10px auto 30px auto;text-align:center;font-size:22px}.score .douche{position:relative;display:block;width:100%;max-width:600px;margin:0 auto;transform-origin:50% 50%}.score .douche:hover{transform:scaleX(-1)}.score .douche img{position:relative;width:380px;max-width:50%;margin:0 auto;display:block}.score .nextcopy{color:#fff;max-width:500px;margin:30px auto;text-align:center;font-size:20px}.score .btn{max-width:320px;margin:20px auto}.score .btn img{width:100%}