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 1.5rem #252525);
}

:root {
  --c1: #FFFFFF;
  --c2: #FFFFFF;
  --c3: #FFFFFF;
  --c4: #FFFFFF;
}



.loader {
  width: 5em;
  height: 1em;
  z-index:var(--loaderZ, 1);
  position: relative;
  background: linear-gradient(0.25turn, var(--c2) 0 0) left/0% 100% no-repeat
      #dbdcef;
  animation: progress-jgv380 2s infinite linear;
}

@keyframes progress-jgv380 {
  100% {
     background-size: 100% 100%;
  }
}