/* public/style.css */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --accent: #00c9a7;
}
main p {
  text-align: center;
}
nav a[href="music.html"], nav a[href="index.html"] {
  color: #ffffff; /* hot pink */
  font-weight: bold;
  text-decoration: none;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: grid;
  place-items: center;
  min-height: 100vh;
}
canvas#waveform {
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 100vh;
  z-index: -2; /* Put it behind other content */
  display: block;
}
#draw-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
}
#draw-canvas.drawing {
  pointer-events: auto;/* only while the mouse is down */
}
header { text-align: center; }
.cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
h1 { font-size: clamp(3rem, 8vw, 6rem); margin: 0; }
audio {
  width: 300px;
  margin: 1rem 0;
  display: block;
  z-index: 2;
}
footer { margin-top: 4rem; opacity: .5; }
#color-picker,
#clear-btn,
#msg-form,
#msg-list {
  position: relative;   /* creates a new stacking context */
  z-index: 2;           /* now these sit on top */
}