body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}@font-face{font-family:"RoadRage";src:url(/static/media/Road_Rage.03e8327b.otf) format("opentype")}body,html{padding:0;margin:0}body{color:#fff}body:before{content:"";position:fixed;left:0;top:0;width:100%;height:100%;background-color:#000;z-index:-1;transition:background-color .3s ease}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}#root{width:100%;height:100%}#root,canvas{position:fixed}canvas{top:0;left:0;opacity:0;z-index:-1;-webkit-animation:fadeIn 2s cubic-bezier(.075,.82,.165,1) 1s forwards;animation:fadeIn 2s cubic-bezier(.075,.82,.165,1) 1s forwards}section{color:#fff;max-width:900px;margin:0 auto 2rem}img{max-width:100%}h1{font-family:"RoadRage";font-weight:400}@-webkit-keyframes zoomIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes zoomIn{0%{transform:scale(0)}to{transform:scale(1)}}h2{margin-top:0}.overlay{position:relative;display:flex;height:100%;z-index:10}.overlay h1{opacity:1;visibility:visible;font-size:7vw;color:#fff;letter-spacing:-1vw;text-align:center;position:relative;transform:scale(0);width:100%;margin:auto;-webkit-animation:zoomIn 1.3s cubic-bezier(.075,.82,.165,1) 1.5s forwards;animation:zoomIn 1.3s cubic-bezier(.075,.82,.165,1) 1.5s forwards;transition:opacity .6s ease,visibility .6s ease}.overlay h1.hidden{opacity:0;visibility:hidden}@-webkit-keyframes glow{0%{text-shadow:0 0 10px #fff}to{text-shadow:10px 10px #6b0139}}@keyframes glow{0%{text-shadow:0 0 10px #fff}to{text-shadow:10px 10px #6b0139}}.overlay h1 span{position:relative;-webkit-animation:glow 1s cubic-bezier(.075,.82,.165,1) 3s forwards;animation:glow 1s cubic-bezier(.075,.82,.165,1) 3s forwards;margin:0 .5rem}.overlay h1 span:first-child{-webkit-animation-delay:2s;animation-delay:2s}.overlay h1 span:nth-child(2){-webkit-animation-delay:2.1s;animation-delay:2.1s}.overlay h1 span:nth-child(3){-webkit-animation-delay:2.2s;animation-delay:2.2s}.overlay h1 span:nth-child(4){-webkit-animation-delay:2.3s;animation-delay:2.3s}.overlay h1 span:nth-child(5){-webkit-animation-delay:2.4s;animation-delay:2.4s}.overlay h1 span:nth-child(6){-webkit-animation-delay:2.5s;animation-delay:2.5s}.overlay h1 span:nth-child(7){-webkit-animation-delay:2.6s;animation-delay:2.6s}.overlay h1 span:nth-child(8){-webkit-animation-delay:2.7s;animation-delay:2.7s}.overlay h1 span:nth-child(9){-webkit-animation-delay:2.8s;animation-delay:2.8s}.overlay h1 span:nth-child(10){-webkit-animation-delay:2.9s;animation-delay:2.9s}.button-group{position:absolute;height:4rem;display:flex;justify-content:center;top:70vh;left:50%;transform:translateX(-50%)}@-webkit-keyframes expand{0%{height:0;width:0;border-width:2px}50%{width:0;height:3rem;border-width:2px}to{width:10rem;height:3rem;border-width:2px}}@keyframes expand{0%{height:0;width:0;border-width:2px}50%{width:0;height:3rem;border-width:2px}to{width:10rem;height:3rem;border-width:2px}}.button{position:relative;align-self:center;background:transparent;transform:skew(-30deg);outline:0;width:10rem;height:3rem;border:2px solid #bbf5ff;color:#bbf5ff;font-size:1rem;text-transform:uppercase;padding:0;overflow:hidden;opacity:1;visibility:visible;transition:opacity .6s ease,visibility .6s ease}.button:before{content:"";width:100%;height:0;background-color:#000;position:absolute;bottom:0;left:0;transition:height .1s cubic-bezier(.03,.49,.38,1.01);z-index:-1}.button.hidden{opacity:0;visibility:hidden}.button:hover:before{height:100%}.button span{display:inline-block;position:relative;white-space:nowrap;align-self:center;transform:skew(30deg);z-index:10}.button-drive{border-width:0;width:0;height:0;-webkit-animation:expand 1s cubic-bezier(.075,.82,.165,1) 2.5s forwards;animation:expand 1s cubic-bezier(.075,.82,.165,1) 2.5s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.button-drive span{opacity:0;-webkit-animation:fadeIn .5s cubic-bezier(.075,.82,.165,1) 2.5s forwards;animation:fadeIn .5s cubic-bezier(.075,.82,.165,1) 2.5s forwards}.dashboard{display:flex;justify-content:center;width:100%;height:100%}@media screen and (max-width:770px){.dashboard{transform:scale(.45)}}.dashboard .odometer{display:inline-flex;align-self:flex-end;margin-bottom:17vh}.dashboard .odometer .dials{display:flex;justify-content:center;position:relative;width:10rem;height:10rem;border-radius:100%;border:1px solid #aaa;margin:0 8rem}.dashboard .odometer .dials .text{position:relative;align-self:flex-end;bottom:-2rem;font-weight:700;font-size:.9rem}.dashboard .odometer .dials ul{margin:0;padding:0;position:absolute;top:50%;left:50%;counter-reset:section}.dashboard .odometer .dials ul li{position:absolute;top:50%;left:50%;list-style-type:none;border-radius:100%}.dashboard .odometer .dials ul li:before{content:"";position:absolute;top:9.2rem;background-color:#fff;width:4px;height:1.2rem}.dashboard .odometer .dials ul li span.number{position:absolute;top:7.5rem;left:-.5rem}.dashboard .odometer .dials.mph ul li:nth-child(odd):before{height:.7rem;top:9.7rem;width:1px}.dashboard .odometer .needle{position:absolute;top:50%;left:50%;transform:rotate(50deg)}.dashboard .odometer .needle:before{content:"";position:absolute;width:4px;height:9rem;left:-2px;background-color:#fff}.keyboard-overlay{position:absolute;display:flex;flex-direction:column;justify-content:space-evenly;top:50%;left:50%;background-color:rgba(0,26,56,.9490196078431372);margin:0;width:50vw;height:60vh;transform:translate(-50%,-50%);transition:opacity .3s ease,visibility .3s ease}.keyboard-overlay:before{content:"";position:absolute;top:-1rem;left:-1rem;width:calc(100% + 1.4rem);height:calc(100% + 1.4rem);background-color:transparent;border:5px solid #031b38}.keyboard-overlay h2{font-size:2.2rem;margin:0;align-self:center;text-align:center;line-height:1.4;text-shadow:0 0 5px #fff;font-family:Arial,Helvetica,sans-serif}.keyboard-overlay h2 span{font-size:.7em}.keyboard-overlay .content{align-self:center;height:14rem;width:100%;display:flex;justify-content:center}.keyboard-overlay .content .container{position:relative;align-self:center}.keyboard-overlay .content .container button{position:absolute;left:-1rem;margin:0;width:3rem;height:3rem;background-color:#b327aa;color:#fff;outline:0;border:0;border-radius:.5rem;-ms-user-select:none;user-select:none;-webkit-user-select:none;transition:background-color .2s ease,transform .2s ease}.keyboard-overlay .content .container button.active{background-color:#92198a;transform:scale(.95)}.keyboard-overlay .content .container button:after{pointer-events:none;content:attr(title);position:absolute;color:#cacaca}.keyboard-overlay .content .container button.forward{top:-4rem}.keyboard-overlay .content .container button.forward:after{top:-1.5rem;left:0}.keyboard-overlay .content .container button.reverse{top:0}.keyboard-overlay .content .container button.reverse:after{top:3.5rem;left:0}.keyboard-overlay .content .container button.left{left:-5rem}.keyboard-overlay .content .container button.left:after{top:3.5rem;left:0}.keyboard-overlay .content .container button.right{left:3rem}.keyboard-overlay .content .container button.right:after{top:3.5rem;left:0}.keyboard-overlay button{align-self:center}.keyboard-overlay.active{opacity:1;visibility:visible}.keyboard-overlay.hidden{opacity:0;visibility:hidden}.joystick-overlay{width:100px;height:100px;display:flex;justify-content:center;align-items:center;border-radius:50px;background-color:hsla(0,0%,100%,.2);position:fixed;bottom:10vh;left:calc(50vw - 50px);z-index:10000}.joystick-overlay .joystick{width:0;height:0;overflow:visible;position:relative}.joystick-overlay .joystick:before{content:"";width:50px;height:50px;left:-25px;top:-25px;background-color:#00f;border-radius:25px;pointer-events:none;position:absolute}.radio{padding:0;position:fixed;bottom:1rem;left:50%;transform:translate(-50%);border:0;color:#fff;font-family:monospace;z-index:10}.radio,.radio .dials{background:none;outline:0}.radio .dials{border:2px solid #fff;width:2rem;height:2rem;border-radius:100%;display:inline-block;line-height:0;position:absolute;cursor:pointer}.radio .volume{left:-3rem}.radio .tuner{right:-3rem}.radio button[data-track]{background:none;border:0;outline:0;color:#fff;cursor:pointer;transition:text-shadow .4s ease}.radio:after{content:"";position:absolute;bottom:-.8rem;left:20%;height:35px;width:2px;background-color:orange;z-index:-1;transition:left .4s ease-in-out}.radio[data-current-track]:after{left:0}.radio[data-current-track="1"]:after{left:8%}.radio[data-current-track="2"]:after{left:33%}.radio[data-current-track="3"]:after{left:57%}.radio[data-current-track="4"]:after{left:85%}.radio[data-current-track="1"] button[data-track="1"],.radio[data-current-track="2"] button[data-track="2"],.radio[data-current-track="3"] button[data-track="3"],.radio[data-current-track="4"] button[data-track="4"]{text-shadow:0 0 5px #fff}.radio:before{content:"";position:absolute;bottom:-4px;left:0;height:1px;width:100%;background-color:#fff}
/*# sourceMappingURL=main.ea75c559.chunk.css.map */