*{box-sizing:border-box}body{margin:0;padding:0;min-width:100vw;min-height:100vh;background-color:#e00f22;box-shadow:inset -10px -10px #000,inset 10px 10px #000,inset -15px -15px #fff,inset 15px 15px #fff;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:Anton,sans-serif}h1,h2,h3{margin:0;text-align:center}h1{font-family:Luckiest Guy,cursive;text-align:center;font-size:7rem;letter-spacing:5px;color:#fff;z-index:1}h2{color:#000;text-transform:uppercase;letter-spacing:1px;font-size:1rem;font-size:1.5rem;font-weight:400}h3{font-family:Luckiest Guy,cursive}button{font-family:Anton,sans-serif;background:#fff;border:0;padding:12px 35px;font-size:1rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}.background{position:fixed;z-index:-1;top:0;left:0;width:100vw;height:100vh;background-size:cover;background-position:center center}.center{display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative}@media only screen and (max-width:650px){h2{font-size:.9rem}}button.select-button,button.repeat{transition:color .1s ease-out,scale .12s ease,rotate .12s ease}button.select-button:hover,button.repeat:hover{scale:1.04;rotate:-1deg}button.select-button:active,button.repeat:active{scale:.94}.confetti{position:fixed;display:block;pointer-events:none;z-index:999}.main-logo{width:490px;opacity:0;animation:transitionFadeIn .6s ease-out 0s forwards;animation-direction:forwards}.sub-text{opacity:0;font-size:17px;letter-spacing:1px;animation:transitionFadeIn .5s ease-out .3s forwards}.select-button{opacity:0;animation:transitionFadeIn .5s ease-out .4s forwards;margin-top:40px;transition:color .1s ease-out}.select-button:hover{color:#fff}.select-button:before{content:"";position:absolute;background:#000;bottom:0;left:0;right:0;top:100%;z-index:-1;transition:top .1s ease-out}.select-button:hover:before{top:0}.face{opacity:0}.facewrap-1{position:absolute;top:-90px;left:-160px;z-index:0;animation:wiggle 7s infinite .3s linear}.facewrap-2{position:absolute;bottom:-40px;left:-160px;animation:wiggle 7s infinite 1.9s linear}.facewrap-3{position:absolute;top:-160px;animation:wiggle 7s infinite 1s linear}.facewrap-4{position:absolute;top:-150px;right:-175px;z-index:1;animation:wiggle 7s infinite 1s linear}.facewrap-5{position:absolute;right:-260px;animation:wiggle 7s infinite 1.8s linear}.facewrap-6{position:absolute;right:-100px;bottom:-50px;animation:wiggle 7s infinite .8s linear}.face1{animation:pop .2s ease-out .6s forwards}.face2{animation:pop .2s ease-out .7s forwards}.face3{animation:pop .2s ease-out .35s forwards}.face4{animation:pop .2s ease-out .8s forwards}.face5{animation:pop .2s ease-out .9s forwards}.face6{animation:pop .2s ease-out 1s forwards}.fade{transition:opacity .3s ease;opacity:0}.volume-on{position:fixed;bottom:20px;left:50%;transform:translate(-50%);height:40px;color:#fff}.volume-on img{height:30px;margin-right:10px;margin-bottom:-8px}.volume-on span{font-size:15px;letter-spacing:1.3px}@keyframes transitionFadeIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes wiggle{0%{transform:rotate(10deg)}20.3%{transform:rotate(-15deg)}21%{transform:rotate(17deg)}21.5%{transform:rotate(5deg)}22%{transform:rotate(15deg)}22.5%{transform:rotate(5deg)}23%{transform:rotate(13deg)}23.5%{transform:rotate(10deg)}24%{transform:rotate(12deg)}24.5%{transform:rotate(10deg)}}@media only screen and (max-width:650px){.face{display:none}.face4{display:block;width:230px;height:230px}.facewrap-4{left:50%;margin-left:-100px;margin-top:0%;transform-origin:center center;animation:none;width:200px;height:200px}.main-logo{width:100%;max-width:500px}.volume-on{width:100%;text-align:center}.volume-on span{font-size:14px}}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:hidden;background:#e00f22;cursor:pointer;clip-path:circle(0% at 50% 50%)}.intro-rays{position:absolute;left:50%;top:50%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;background:repeating-conic-gradient(#e00f22,#e00f22 9deg,#f5293b 9deg,#f5293b 18deg)}.intro-stage{position:absolute;top:0;right:0;bottom:0;left:0}.intro-word{position:absolute;font-family:Luckiest Guy,cursive;line-height:1;white-space:nowrap;pointer-events:none;opacity:0}.intro-face{position:absolute;width:22vmin;pointer-events:none}.intro-skip{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:Anton,sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff9;pointer-events:none}.score{position:fixed;top:45px;right:45px;color:#fff;font-size:1.2rem;font-weight:400}.movie-text{font-size:2.8rem;letter-spacing:1.5px;font-weight:400;margin-bottom:20px}.movie-title{width:90%;height:46px}.replay{height:200px;position:relative;cursor:pointer;transition:transform .15s ease}.replay:hover{transform:scale(1.03)}.replay img{width:210px}.image-placeholder{width:160px;height:240px;margin-bottom:10px;transition:transform .15s ease}.select-movie:hover .image-placeholder img{box-shadow:0 10px 20px #0000004d}.image-placeholder img{width:100%;border:3px solid white;transition:box-shadow .2s ease}.select-movie{margin:0 10px;background:none;padding:0;text-transform:none;outline:0;display:flex;flex-direction:column;align-items:center;justify-content:start}.in .select-movie{opacity:0;animation:slideIn .3s ease-out 0s forwards}.out .select-movie{opacity:1;animation:slideOut .3s ease-in 0s forwards}.select-movie:nth-child(1){animation-delay:0ms}.select-movie:nth-child(2){animation-delay:.1s}.select-movie:nth-child(3){animation-delay:.2s}.select-movie:nth-child(4){animation-delay:.3s}.select-movie:hover .image-placeholder{transform:scale(1.05)}.logo{position:fixed;top:45px;left:45px;width:150px;cursor:pointer}.replay-bubble{position:absolute;right:-150px;top:30px}.options{display:flex;justify-content:center}.miniscore{opacity:0;display:inline-block;animation:bigPop .5s ease 0s forwards;width:50px;height:50px;border:2px solid;border-radius:100%;padding:10px}.replay-image{position:absolute;width:60px;height:100%;padding-bottom:10px;left:50%;top:0;transform:translate(-50%);display:block}.replay-image img{width:100%;height:100%}@keyframes bigPop{0%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}.replay-bubble span{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:25px;font-family:Luckiest Guy,cursive;letter-spacing:1px}.background{animation:fadeIn .3s ease-out 0s forwards}.us{position:fixed;bottom:30px;right:30px}.us,.us a{color:#95151a;text-transform:uppercase;letter-spacing:2px;text-decoration:none;font-size:14px}.us a{border-bottom:2px solid}.check,.cross{animation:pop .3s ease-out 0ms forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(70px)}}@media only screen and (max-width:650px){.logo{width:100px;display:none}.replay{transform:scale(.5);position:fixed;top:45px;left:45px;transform-origin:top left;padding-top:0;margin-top:-20px;margin-left:-20px}.replay:hover{transform:scale(.5)}.movie-text{font-size:1.4rem;padding-top:45px;margin-bottom:10px}.options{display:flex;flex-wrap:wrap;justify-content:center;padding-bottom:30px}.select-movie{width:40%;margin:5px 0 0;opacity:0}.movie-title{display:none}.image-placeholder{width:120px;height:180px;margin-bottom:2px}.us{display:none}}.wait .select-movie{opacity:0}.replay:active{scale:.96}.select-movie:active .image-placeholder{transform:scale(.95)}.select-movie.picked-right .image-placeholder{animation:rightPop .45s cubic-bezier(.2,1.6,.4,1) forwards}.select-movie.picked-right .image-placeholder img,.select-movie.reveal-right .image-placeholder img{border-color:#3ddc84;box-shadow:0 0 0 4px #3ddc84,0 10px 30px #00000059}.select-movie.reveal-right:not(.picked-right) .image-placeholder{animation:nudge .5s ease .15s}.select-movie.picked-wrong .image-placeholder{animation:shake .4s ease}.select-movie.picked-wrong .image-placeholder img{border-color:#95151a;filter:grayscale(.7) brightness(.8)}.progress{display:flex;justify-content:center;gap:8px;margin:-4px 0 18px}.progress span{width:10px;height:10px;border-radius:50%;background:#00000026;transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .2s}.progress .current{background:#000;transform:scale(1.4)}.progress .right{background:#3ddc84}.progress .wrong{background:#e00f22}@keyframes rightPop{0%{transform:scale(1)}40%{transform:scale(1.15) rotate(-3deg)}to{transform:scale(1.08)}}@keyframes nudge{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px) rotate(-2deg)}40%{transform:translate(10px) rotate(2deg)}60%{transform:translate(-7px)}80%{transform:translate(5px)}}@media(max-width:650px){.progress{margin:0 0 10px}}@media(prefers-reduced-motion:reduce){.select-movie .image-placeholder{animation:none!important}}.out .select-movie{animation-duration:.25s}.out .select-movie:nth-child(2){animation-delay:40ms}.out .select-movie:nth-child(3){animation-delay:80ms}.out .select-movie:nth-child(4){animation-delay:.12s}.container{width:600px;border-radius:20px 20px 25px;text-align:center;background:#fff;box-shadow:20px 10px 75px -25px #0009;position:relative;opacity:0;animation:fadeIn .3s ease-out .2s forwards}.sub-container{border-radius:20px;background:#fff;width:100%;height:350px;position:relative;z-index:2;box-shadow:0 40px 80px -35px #00000080}.wow{position:absolute;color:#000;top:-40px}.wow{display:flex;width:100%;align-items:flex-start;justify-content:center}.wow img{width:200px;height:200px;margin-right:-65px;margin-left:-50px;margin-top:-50px;z-index:2}.your-score{padding-top:60px;font-size:2.2rem}.final-score{font-size:6.2rem;color:#dd162b;line-height:1.1}.final-comment{font-size:1.6rem;line-height:2.5rem;margin:20px auto 0}.repeat{background:none;font-family:Luckiest Guy,cursive;text-transform:uppercase;color:#fff;margin-top:50px;margin-bottom:-50px;font-size:1.6rem;opacity:0}@media only screen and (max-width:650px){.container{width:85vw;margin-top:60px}.wow{font-size:70px;display:flex;width:100%;align-items:flex-start;justify-content:center}.wow img{width:120px;height:120px;margin-top:-30px;margin-left:-40px;margin-right:-40px}.your-score{padding-top:30px}.final-comment{font-size:1.1rem;padding:0 20px;line-height:2rem}.final-comment div{display:inline}.repeat{margin-top:20px}}.count-pop{display:inline-block;animation:countPop .25s ease-out}.final-comment{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}.final-comment.show{opacity:1;transform:none}@keyframes countPop{0%{transform:scale(1.4)}to{transform:scale(1)}}.wow-w{display:inline-block;opacity:0}.wow-left{animation:wowLeft .45s cubic-bezier(.2,1.4,.4,1) .25s forwards}.wow-right{animation:wowRight .45s cubic-bezier(.2,1.4,.4,1) .33s forwards}.wow-head{position:relative;z-index:2;display:inline-block;opacity:0;animation:headDrop .6s cubic-bezier(.3,1.5,.5,1) .45s forwards}.wow-head img.bump{animation:headBump .22s ease-out}.wow.landed .wow-w{animation:none;opacity:1}.wow.landed .wow-left{animation:wLeftKick .5s ease-out}.wow.landed .wow-right{animation:wRightKick .5s ease-out}.wow.landed .wow-head{opacity:1}.wow.great .wow-head{animation:headGreat .9s cubic-bezier(.2,1.2,.4,1),headBob 1.6s ease-in-out .9s infinite}.wow.ok .wow-head{animation:headOk .6s cubic-bezier(.2,1.6,.4,1),headBob 2.2s ease-in-out .6s infinite}.wow.meh .wow-head{animation:headMeh .9s ease-out forwards}@keyframes wowLeft{0%{opacity:0;transform:translate(-160px) rotate(-30deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes wowRight{0%{opacity:0;transform:translate(160px) rotate(30deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes headDrop{0%{opacity:0;transform:translateY(-200px) rotate(-25deg) scale(.6)}60%{opacity:1;transform:translateY(10px) rotate(6deg) scale(1.05)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes headBump{0%{transform:scale(1.12) rotate(-4deg)}to{transform:scale(1) rotate(0)}}@keyframes wLeftKick{30%{transform:translate(-14px) rotate(-10deg)}to{transform:none}}@keyframes wRightKick{30%{transform:translate(14px) rotate(10deg)}to{transform:none}}@keyframes headGreat{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(200deg)}to{transform:scale(1) rotate(360deg)}}@keyframes headOk{0%{transform:scale(1)}40%{transform:scale(1.2) rotate(-6deg)}to{transform:scale(1) rotate(0)}}@keyframes headMeh{0%{transform:none}30%{transform:translateY(-6px) rotate(4deg)}to{transform:translateY(14px) rotate(-12deg) scale(.95)}}@keyframes headBob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(3deg)}}.repeat.show{animation:repeatIn .5s cubic-bezier(.2,1.6,.4,1) .5s forwards,repeatNudge 2.6s ease-in-out 2s infinite}.repeat{font-size:2rem;text-shadow:.08em .08em 0 #000}@keyframes repeatIn{0%{opacity:0;transform:translateY(30px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes repeatNudge{0%,70%,to{opacity:1;transform:rotate(0) scale(1)}76%{opacity:1;transform:rotate(-5deg) scale(1.08)}82%{opacity:1;transform:rotate(4deg) scale(1.08)}88%{opacity:1;transform:rotate(-2deg) scale(1.04)}}@media(prefers-reduced-motion:reduce){.wow .wow-head,.wow .wow-w,.repeat.show{animation:fadeIn .3s ease-out forwards!important}}