html,
   body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   canvas {
     max-width: 100%;
     max-height: 100%;
     margin: auto;
     overflow: auto;
     object-fit: contain;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     filter: drop-shadow(0 0 2rem #858585);
   }
   
     .loader {
       color: #FFF;
       position: relative;
       z-index:var(--loaderZ, 1);
       background: #FFF;
       animation: escaleY 1s infinite ease-in-out;
       width: 1em;
       height: 4em;
       animation-delay: -0.16s;
     }
     .loader:before,
     .loader:after {
       content: '';
       position: absolute;
       top: 0;
       left: 2em;
       background: #FFF;
       width: 1em;
       height: 4em;
       animation: escaleY 1s infinite ease-in-out;
     }
     .loader:before {
       left: -2em;
       animation-delay: -0.32s;
     }
     
     @keyframes escaleY {
       0%, 80%, 100% {
         box-shadow: 0 0;
         height: 4em;
       }
       40% {
         box-shadow: 0 -2em;
         height: 5em;
       }
     }
     

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

#loader-text {
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  color: #000;
}