.app{display:flex;height:100vh;justify-content:space-between;overflow:hidden;width:100vw}.controlPan{width:20vw}.controlPan,.controlPan .statistics{align-items:center;display:flex;flex-direction:column}.controlPan .statistics{color:#f5f5f5;-webkit-filter:drop-shadow(0 0 .75rem #6b6180);filter:drop-shadow(0 0 .75rem rgb(107,97,128));font-size:1.5vmax;gap:1rem;height:50vh;justify-content:center;width:100%}.controlPan .statistics h3{color:#6aa7e0}.controlPan .statistics span{color:#1de9d1;font-size:1.5vmax}.controlPan .statistics p{color:#a4a4ad;font-size:1vmax}.bgImage{opacity:.8;position:absolute}.bgImage img{width:50vmax}.controls{background-color:#252b4c;bottom:0;display:flex;height:50vh;position:relative;right:0;width:20vw}.controls .controlBtn{align-items:center;display:flex;flex-direction:column;gap:1rem;height:100%;justify-content:center;position:absolute;width:100%}.controls .controlBtn .gr1,.controls .controlBtn .gr2,.controls .controlBtn .gr3{align-items:center;display:flex;gap:1rem;height:10%;justify-content:center;width:100%}.controls .controlBtn .gr1 .btn,.controls .controlBtn .gr2 .btn,.controls .controlBtn .gr3 .btn{border-radius:5px;color:#352a56;cursor:pointer;font-size:1vmax;margin:1rem 0 0;padding:3px;width:7vmax}.controls .controlBtn .gr1 .btn:hover,.controls .controlBtn .gr2 .btn:hover,.controls .controlBtn .gr3 .btn:hover{background-color:#4141aa;border:none;color:#f5f5f5}.controls .controlBtn .gr1 .engine-on,.controls .controlBtn .gr1 .gear-on,.controls .controlBtn .gr1 .speed-on,.controls .controlBtn .gr2 .engine-on,.controls .controlBtn .gr2 .gear-on,.controls .controlBtn .gr2 .speed-on,.controls .controlBtn .gr3 .engine-on,.controls .controlBtn .gr3 .gear-on,.controls .controlBtn .gr3 .speed-on{background-color:#219929;border:none;color:#d3d3d3}.controls .controlBtn .gr1 .engine-off,.controls .controlBtn .gr2 .engine-off,.controls .controlBtn .gr3 .engine-off{background-color:red;border:none;color:#d3d3d3}.controls .bgImg{align-items:center;display:flex;height:auto;justify-content:center;position:relative;width:100%}.controls .bgImg img{opacity:.3;position:relative;width:20vmax}.distance,.gear,.speed{background-color:rgba(55,57,35,.6);border-radius:1.2vmax 0;display:flex;-webkit-filter:drop-shadow(0 0 .75rem #6b6180);filter:drop-shadow(0 0 .75rem rgb(107,97,128));flex-direction:column;height:5.5vmax;justify-content:center;text-align:center;width:15vmax}*{box-sizing:border-box;margin:0;padding:0}.container{display:flex;height:100vh;overflow:hidden;position:absolute;width:80vw}#canvas1{height:45%;width:100%;z-index:11}.bg{height:100%;position:absolute;width:100%;z-index:10}.boat,.lightHolder,.sky,.water1,.water2{display:flex;height:110%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:101%}.water1 img{-webkit-animation:water1 5.5s ease-in-out infinite;animation:water1 5.5s ease-in-out infinite}.water2{z-index:12}.water2 img{-webkit-animation:water1 4s ease-in-out infinite;animation:water1 4s ease-in-out infinite}.boat{align-items:center;justify-content:center;z-index:11}.boat img{height:50%;position:absolute;top:30%;width:50%}.boat img,.lightHolder{-webkit-animation:boat 3s ease-out infinite;animation:boat 3s ease-out infinite}.lightHolder{justify-content:center;left:0;top:0;z-index:10}.lightHolder .light{-webkit-animation:light .35s infinite;animation:light .35s infinite;background-color:red;height:1vmax;left:-11.1vw;position:relative;top:44vh;width:1vmax}@-webkit-keyframes boat{0%,to{-webkit-transform:translateY(10px);transform:translateY(10px)}50%{-webkit-transform:translateY(15px);transform:translateY(15px);-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}}@keyframes boat{0%,to{-webkit-transform:translateY(10px);transform:translateY(10px)}50%{-webkit-transform:translateY(15px);transform:translateY(15px);-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}}@-webkit-keyframes light{0%,to{background-color:red}50%{background-color:blue}}@keyframes light{0%,to{background-color:red}50%{background-color:blue}}@-webkit-keyframes water1{0%,to{-webkit-transform:rotate(1deg);transform:rotate(1deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes water1{0%,to{-webkit-transform:rotate(1deg);transform:rotate(1deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes water2{0%,to{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes water2{0%,to{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
/*# sourceMappingURL=main.af4da1e6.css.map*/