:root {
  --bg: #1a1e2d;
  --green: #a5ea9b;
  --pink: #ff61d8;
  --blue: #569cfa;
  --orange: #ffcc81;
  --cyan: #7ed1e2;
}

body {
  background: var(--bg);
  display: flex;
  place-content: center;
  align-items: flex-end;
  overflow-x: hidden;
}

.background {
  width: 80vw;
  height: 80vh;

  svg {
    height: 100%;
    width: 100%;
    overflow: visible;
  }
}

#bongo-cat {
  fill: var(--bg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;

  .laptop-cover,
  .headphone .band {
    fill: none;
  }

  .paw,
  .head {
    stroke: var(--orange);
  }

  .laptop-keyboard {
    stroke-width: 2;
  }

  .terminal-code {
    stroke-width: 5;
  }

  .music .note,
  .laptop-base,
  .laptop-cover,
  .paw .pads {
    stroke: var(--pink);
  }

  .table line,
  .headphone .band,
  .headphone .speaker path:nth-child(3) {
    stroke: var(--green);
  }

  .terminal-frame,
  .laptop-keyboard,
  .headphone .speaker path:nth-child(2) {
    stroke: var(--blue);
  }

  .terminal-code,
  .headphone .speaker path:first-child {
    stroke: var(--cyan);
  }
}

/* Full-page SVG background */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Send to the back */
  overflow: hidden;
}

/* Scrollable content */


.section {
  margin: 50px 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.gradient-text {
  font-size: 48px; /* Adjust font size as needed */
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #ff6ec4, #7873f5, #66e6a8, #ffeb3b);
  background-size: 300% 300%; /* Optional for animation */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent; /* For non-webkit browsers */
  animation: gradient-animation 3s infinite; /* Optional animation */
}