body {
   margin: 0;
   overflow: hidden;
}


canvas {
   display: block;
}



#MainHeaderDIV {
   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
   border-radius: 10px;
   font-family: 'Great Vibes', cursive;
   font-size: 1.5rem;
   padding: 0px;
   margin: 0px;
   background: transparent;
   display: flex;
   align-items: center;
   gap: 30px;
}

#toggleHeaderBtn {
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.6);
   font-size: 20px;
   cursor: pointer;
   padding: 5px;
   line-height: 1;
}



#MainHeaderDIV h1 {
   margin: 0px;
   padding: 0px;
   background: none;
   color: dodgerblue; 
    /* #06c8c8;  A slightly darker base cyan */
   text-shadow: 
      0 0 1px rgb(189, 255, 255),  /* Shadow 1: No X or Y offset, 1px blur */
      0 0 5px rgb(189, 255, 255),  /* Shadow 2: No X or Y offset, 5px blur */
      0 0 7px rgb(189, 255, 255), /* Shadow 3: No X or Y offset, 10px blur */
      0 0 10px rgb(189, 255, 255); /* Shadow 4: No X or Y offset, 15px blur */
   animation: glow 9s ease-in-out infinite alternate;
}




@keyframes glow {
   from {
      text-shadow: 
         0 0 1px rgb(189, 255, 255),
         0 0 3px rgb(189, 255, 255),
         0 0 10px rgb(189, 255, 255),
         0 0 15px rgb(189, 255, 255);
   }
   to {
      text-shadow: 
         0 0 10px rgb(189, 255, 255),
         0 0 20px rgb(189, 255, 255),
         0 0 30px rgb(189, 255, 255),
         0 0 40px rgb(189, 255, 255);
   }
}



#startAnimationButtonDIV {
   position: fixed;
   top: 60%;
   left: 50%;
   transform: translateX(-50%);
}



.animationButton {
   background-color: #232323;
    /* black; */
   color: lime;
   padding: 15px;

   width: 300px;
   height: auto;

   font-size: large;

   border: solid 2px #a1a1a1;
   border-radius: 7px;

   cursor: pointer;

   font-family: 'Chakra Petch', sans-serif;
   font-size: 2.5rem;
   font-weight: 500;
   
}



/* Style to make the Button FADE... */
@keyframes dissolveAndFade {
   0% {
      opacity: 1;
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(1.2);
   }
}


.fade-out {
   animation: dissolveAndFade 1s forwards;
   pointer-events: none; /* Prevents further clicks during animation */
}





#audioControlsDIV {
   background-color: #0070ff; /* #c5c5c5; */
   position: fixed;
   left: 50%;
   bottom: 5%;
   transform: translateX(-50%);
   z-index: 1001;
   padding: 25px;
   padding-top: 12px;
   padding-bottom: 12px;

   border: solid 1px black;
   border-radius: 10px;

   display: flex;
   justify-content: space-between;

   align-items: center;
   width: 150px;

   opacity: 0.85;
}



#beanieButtonDIV {
   position: fixed;
   left: 20px;
   top: 20px;
   opacity: 0.65;

   /* transform: translateX(-50%); */

   background: transparent;
   /* background: #c1f3ff; */
   color: white;
   border: solid 0.5px gray;
   border-radius: 15px;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.1s;
   z-index: 1000;
}



#beanieButtonDIV:hover {
   box-shadow: 0 0 5px #ffffff, 0 0 1px #0000ff;
   opacity: 0.99;
   /* transform: scale(1.05); */
}



/* Navigation Help Tooltip */
#navHelpDIV {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 1000;
   cursor: pointer;
}


#navHelpDIV > .material-icons {
   font-size: 28px;
   color: rgba(255, 255, 255, 0.5);
   transition: color 0.2s, text-shadow 0.2s;
}


#navHelpDIV:hover > .material-icons {
   color: rgba(255, 255, 255, 0.9);
   text-shadow: 0 0 10px rgba(189, 255, 255, 0.8);
}


#navHelpTooltip {
   position: absolute;
   top: 40px;
   right: 0;
   background: rgba(0, 61, 203, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   padding: 12px 16px;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: opacity 0.3s, transform 0.3s, visibility 0.399s;

   font-family:Verdana, Geneva, Tahoma, sans-serif !important;
   /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
}




#navHelpDIV:hover #navHelpTooltip {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}





#navHelpTooltip.show-initial {
   position: fixed;
   top: 50%;
   left: 50%;
   right: auto;
   transform: translate(-50%, -50%) scale(1.5);
   opacity: 1;
   visibility: visible;
   animation: moveToCorner 5s linear forwards;
}




@keyframes moveToCorner {
   0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.5);
      transform-origin: center center;
      opacity: 1;
   }
   60% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.5);
      transform-origin: center center;
      opacity: 1;
   }
   61% {
      transform-origin: top right;
   }
   100% {
      top: -100px;
      left: calc(100vw - 48px);
      transform: translate(0, 0) scale(0);
      transform-origin: top right;
      opacity: 0;
   }
}




#navHelpTooltip p {
   margin: 0;
   padding: 4px 0;
   color: white;
   font-family:Verdana, Geneva, Tahoma, sans-serif;
   /* font-family: Georgia, 'Times New Roman', serif; */
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}



#navHelpTooltip .material-icons {
   font-size: 18px;
   color: rgba(189, 255, 255, 0.9);
}