body {
    /* override the default margin of the html body */
    background-color: rgb(39, 36, 36);
    color: rgb(39, 36, 36);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-style: hidden;
  }
  
  
  canvas {
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden;
    border-style: hidden;
  }
  
  #myCanvas {
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden;
    border-style: hidden;
  }
  
  
  #canvasContainer {
  
    width: 100%;
    height: 100vh;
    overflow: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    box-sizing: border-box;
    border-style: hidden;
  }
  
  
    .loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(41, 41, 41);
      transition: opacity 6.85s, visibility 1.85s;
    }
    
    .loader-hidden {
      opacity: 0;
      visibility: hidden;
    }
    
    .loader::after {
      content: "";
      width: 5;
      height: 7;
      border: 6px solid rgb(123, 123, 123);
      border-top-color: rgb(111, 67, 255);
      border-radius: 5%;
      animation: loading 1.45s ease infinite;
    }
    
    @keyframes loading {
      from {
        transform: rotate(0turn);
      }
    
      to {
        transform: rotate(1turn);
      }
    }