body {
    font-family: "Courier New", Courier, monospace;
    background-color: #fefefe;
    color: #111;
    padding: 40px;
    max-width: 800px;
    margin: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%23ccc' fill-opacity='0.3'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  h1 {
    font-size: 2em;
    color: hotpink;
    text-shadow: 1px 1px 0 #000;
  }

  p {
    margin-bottom: 20px;
  }

  .section {
    margin-top: 2em;
    padding: 1em;
    border: 2px dotted #000;
    background-color: #fff0f5;
  }

  #controls, #controls150 {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1em;
    margin-top:1em;
  }

  button, input[type=range] {
    background-color: hotpink;
    color: white;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
  }

  button.inactive {
    background-color: #ccc;
    color: #666;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  }

  input[type=range] {
    /* -webkit-appearance: none; */
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    width: 120px;
    padding: 0;
    margin-top: 3px;
  }

  label {
    font-size: 0.9em;
    margin-right: 0px;
  }

  canvas {
    width: 100%;
    height: 200px;
    background: black;
    display: block;
    margin-top: 1em;
  }

  .scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: bounce 1s infinite;
    font-size: 1.2em;
    color: hotpink;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .scroll-indicator.fade {
    opacity: 0;
  }

  .album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 2em;
  }

  .album-grid a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid #ccc;
  }

  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); }
  }

  footer {
    margin-top: 4em;
    font-size: 0.9em;
    color: gray;
  }

  

  /* Position loading screen absolutely */
#loading-overlay, #begin-text {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

#begin-text {
  cursor: pointer;
}

<style>
    #visualizerCanvas {
      width: 100%;
      height: 200px;
      background: black;
      display: block;
    }
  </style>

  #visualizerCanvas, #visualizerCanvas150 {
    width: 100%;
    height: 200px;
    background: black;
    display: block;
  }