body {
  font-family: Arial, Helvetica, sans-serif;
}

body,
h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
  color: white;
}

/* Set a gradient background for the body */
body {
  background: linear-gradient(to bottom, #080059, #6C4CFC);
}

header {
  margin: 2rem;
}

main {
  margin: 1rem;
  min-height: 100vh;
}

footer {
  margin: 2rem;
}

footer p a {
  color: white;
}

/* Style the SVG container */
svg {
  background-color: transparent;
  /* Transparent background for the chart */
}

/* Style the chart line */
.line {
  fill: none;
  stroke: #FFF;
  /* Purple color for the line */
  stroke-width: 5;
}

/* Style the x-axis */
.x-axis path,
.x-axis line {
  fill: none;
  stroke: #ccc;
  /* Light gray color for x-axis lines */
  shape-rendering: crispEdges;
}

.x-axis text {
  font-size: 12px;
  fill: white;
  /* Text color for the x-axis labels */
}

/* Style the y-axis */
.y-axis path,
.y-axis line {
  fill: none;
  stroke: #ccc;
  /* Light gray color for y-axis lines */
  shape-rendering: crispEdges;
}

.y-axis text {
  font-size: 12px;
  fill: white;
  /* Text color for the y-axis labels */
}

/* Style the legend */
.legend {
  font-size: 16px;
  text-align: right;
  color: white;
  /* Text color for the legend text */
}