/* ==============================
   Home Page Layout & Styles
   ============================== */

/* Global reset for full-screen canvas */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;

  /* ✅ Use theme variables instead of hardcoded black */
  background-color: var(--background-color);
  color: var(--text-color);

  overflow: hidden;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

/* ==============================
   SVG Wave Background
   ============================== */
svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 300px;
  z-index: 1; /* Below text & buttons */
}

/* ==============================
   Control Buttons (Play / Pause / Color)
   ============================== */
.btn-wrapper {
  position: absolute;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  display: flex;
  gap: 20px; /* Space between buttons */
}

/* Circle button styles */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;
  border-radius: 50%;

  background-color: white;
  color: #0a2e44;

  font-size: 20px;
  cursor: pointer;

  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: all 0.2s ease;
}

/* Hover effect for buttons */
.btn-icon:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* ==============================
   Headings & Text
   ============================== */
h1, p {
  position: relative;
  z-index: 10; /* Above wave background */
  text-align: center;
  color: var(--text-color); /* ✅ Themed text */
}

h1 {
  margin-top: 50px;
  font-size: 3em;
}

p {
  font-size: 1.2em;
}