html { } body { margin: 0; width: 100%; height: 100%; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } p{ font-family: "Open Sans", sans-serif; } #myCanvas{ height: 100vh; width: 100vw; position: absolute; } #debugconsole{ background-color: white; } .infos{ pointer-events: none; position: absolute; height: auto; width: 20vw; max-width: 250px; opacity: 0; padding: 6px; border: solid thin black; background-color: white; border-radius: 8px; color: black; text-align: center; overflow: hidden; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; font-size: 3vw; font-family: 'Teko', sans-serif; letter-spacing: 2px; pointer-events: painted; padding-left: 0; padding-right: 0; } #overlay{ height: 100vh; width: 100vw; position: absolute; z-index: 10; pointer-events: none; } #overlay-info{ height: 20vh; width: 10vw; text-align: center; font-family: 'PT Serif', serif; background-color: white; padding: 20px; font-weight: 700; bottom: 50vh; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); position: absolute; margin-left: -100%; min-height: 100px; min-width: 150px; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; } h3{ font-weight: 700; } h5{ font-family: 'Open Sans', sans-serif; } .overlayIN{ margin-left: 0 !important; } #loadingtext-frame{ position: absolute; width: 100%; height: 100%; z-index: 3; background-color: white; pointer-events: none; text-align: center; font-size: 1.3em; line-height: 100vh; font-family: "Open Sans", sans-serif; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .loadingtextframe-out{ opacity: 0; }