:root {
  /* Original Colors */
  --primary-color: #ff1700;
  --secondary-color: #ffa600;
  --tertiary-color: #4d6910;
  --axis-color: #34495e;
  --text-color: #15110a;
  --added-color: #aaaaaa;

  /* Extended Colors */
  --primary-light: #ff5733; /* Lighter version of primary */
  --primary-dark: #c41200; /* Darker version of primary */
  --secondary-light: #ffd580; /* Lighter version of secondary */
  --secondary-dark: #cc8400; /* Darker version of secondary */
  --tertiary-light: #6e8b2c; /* Lighter version of tertiary */
  --tertiary-dark: #374c08; /* Darker version of tertiary */
  --neutral-color-1: #6c757d; /* Neutral grey */
  --neutral-color-2: #aaaaaa; /* Light grey */

  /* Fonts */
  --font-large: 14px;
  --font-medium: 12px;
  --font-small: 8px;
  --font-family: 'Roboto', sans-serif;
}


/* New Container */
.main-grid.chart {
    columns: 2; /* Two columns for a desktop layout */
    column-gap: 1rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.container.chart {
  background-color: var(--color-secondary); /* Use the variable from styles.css */
}


.chart-title {
  font-family: var(--font-family);
  font-size: var(--font-large);
  font-weight: bold;
  fill: var(--text-color);
}

.chart-subtitle {
  font-family: var(--font-family);
  font-size: var(--font-medium);
  fill: var(--text-color);
}

.axis path,
.axis line {
  stroke: var(--axis-color);
}

.text {
  font-family: var(--font-family);
  fill: var(--text-color);
  font-size: var(--font-small);
}

.chart-note,
.chart-source {
  font-family: var(--font-family);
  fill: var(--added-color);
  font-size: var(--font-small);
}

.axis-label {
  font-family: var(--font-family);
  font-size: var(--font-medium);
  fill: var(--text-color);
}

#IEA_Growing_Magnet_Demand_Chart {
  width: 100%;
  height: 500px; /* Adjust as needed */
  position: center;
}

#IEA_Magnet_Base_Metal_Chart {
  width: 100%;
  height: 500px; /* Adjust as needed */
  position: center;
}


#IEA_Clean_Energy_Demand_Chart {
  width: 100%;
  height: 500px; /* Adjust as needed */
  position: center;
}


#Historic_RE_Production_Chart {
  width: 100%;
  height: 500px; /* Adjust as needed */
  position: center;
}