*{font-family:system-ui;margin:0;padding:0;color:#fff}canvas{display:block;vertical-align:bottom}.page{height:100vh;overflow:hidden;width:100vw;min-width:100vw;position:relative;padding:100px;box-sizing:border-box;background:#0000008a}.title-container{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column;gap:50px}body{background-color:#1a1a1a;color:#fefefe;font-family:Ubuntu;font-size:50px;font-weight:300;text-rendering:optimizeLegibility;text-align:center}.container{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%)}a{text-decoration:none;position:absolute;bottom:10px;right:10px;text-align:right;color:#eee;font-size:15px;line-height:15px}span.blur{position:absolute;left:0;filter:blur(10px);text-shadow:0 0 5px #fff;mix-blend-mode:hard-light}span{position:relative}#glow span{font-size:80px}img.bg-img{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%}div#ui{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999999}.arrow svg{width:50px;fill:#ffffffa6;transition:.5s all ease-in-out}.arrow{position:absolute;left:0;height:100%;width:100px;display:flex;justify-content:end;align-items:center;cursor:pointer;z-index:999;transition:.5s all ease-in-out}#next-arrow{left:unset;right:0}.arrow:hover{background:linear-gradient(270deg,#42424262,transparent)}.arrow:hover svg{fill:white}#back-arrow{justify-content:end;transform:rotateY(180deg)}#back-arrow svg{padding-left:10px}#next-arrow svg{padding-right:10px}#page-slider{transition:.8s all ease-in-out;display:flex;flex-direction:row}#page-slider-wr{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}h1{text-shadow:0 0 15px #fff;font-size:40px;border:2px solid #cacaca61;padding:20px;background:#77777730;box-shadow:0 0 50px #ffffff69;border-radius:50px;backdrop-filter:blur(10px)}input{font-size:30px;backdrop-filter:blur(10px);border:none;border-bottom:2px solid #ffffff4a;line-height:50px;padding:0 10px;width:100%;box-sizing:border-box;background:0 0;height:100%;float:left}input:focus{outline:0}.input-wr{position:relative;width:400px}.input-wr:after,.input-wr:before{position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,red,#00f);content:'';z-index:99999;transition:1s all ease-in-out;transform:scale(0);border-radius:10px}.input-wr.focused:after,.input-wr.focused:before{transform:scale(1)}.input-wr:before{filter:blur(10px)}.page[q]{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.btn,.btn::after{-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.btn{background:0 0;border:3px solid #fff3;border-radius:5px;color:#fff;display:block;font-size:30px;font-weight:700;position:relative;text-transform:uppercase;backdrop-filter:blur(200px);cursor:pointer;transition:.7s all ease-in-out;width:200px;line-height:50px;background:#00000070}.btn::after,.btn::before{background:#323232;content:'';position:absolute;z-index:-1}.btn:hover,.btn:hover .btn-text{background:-webkit-linear-gradient(45deg,red,#ffda00);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.btn-5{overflow:hidden}.btn-5::after{height:100%;left:-35%;top:0;transform:skew(50deg);transition-duration:.6s;transform-origin:top left;width:0}.btn-5:hover:after{height:100%;width:135%}.submit-wr{display:flex;flex-direction:row;gap:20px}.question,.txt{background:#00000087;padding:20px;border-radius:10px;font-size:30px;backdrop-filter:blur(20px)}.txt{padding:40px 100px;font-size:40px;box-shadow:0 10px 20px #00000099}#title-page{padding:0}.correct h1{background:#00ca0087}.wobble-hor-bottom{-webkit-animation:wobble-hor-bottom .8s both;animation:wobble-hor-bottom .8s both}@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}.title-container p{font-size:28px}#finished{justify-content:center}