/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
      background: linear-gradient(135deg, #182632, #1f3a4a);
      color: white;
      font-family: 'Ubuntu', sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
    }

    /* Header / Navigation */
   header {
      background: rgba(0, 0, 0, 0.5);

      padding: 10px 20px;
    }
    .topnav {
      display: flex;
      align-items: center;
      justify-content: center;  /* center contents */
      position: relative;
    }
    
    /* Home link pinned left */
    .left-link {
      position: absolute;
      left: 20px;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }
    .topnav a {
      color: #f1f1f1;
      text-decoration: none;
      padding: 10px 14px;
      border-radius: 10px;
      transition: 0.3s;
      font-size: 16px;

    }

    .topnav a:hover {
      background-color: rgba(255, 0, 0, 0.6);
      color: white;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /* Headings */
    h1 { display:inline-flex; justify-content:center;  align-items: center; font-size: 60px; width: 80%; text-shadow: 1px 1px 3px #000;  box-shadow:6px 6px 6px #888; border-radius: 30px;}
    h2 { font-size: 18px; margin-top: 20px; text-shadow: 1px 1px 2px #000; }

    /* Gauges container */
    .gauges {
      display: flex;
      justify-content: center;
      gap: 50px;
      flex-wrap: wrap;
      margin-top: 40px;
      margin-bottom: 40px;
    }

    .gauges > div {
      padding: 15px;
      border-radius: 20px;
      background: rgba(255,255,255,0.05);
      box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    }

   #chartContainer {
    width: 50%;
    margin: 30px auto;
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  
    display: flex;               /* enable flexbox */
    justify-content: center;     /* center horizontally */
    align-items: center;         /* center vertically */
    min-height: 500px;           /* give it space so "middle" is visible */
  }
  
      /* Position the <h2> at the top of the chart 
.chart-title {
    position: absolute; Allows precise positioning 
    top: 10px; Distance from the top of the container 
    left: 50%; Center horizontally 
    transform: translateX(-50%); /* Adjust for centering 
    margin: 0; Remove default margin 
    font-size: 20px; Adjust font size as needed 
    background-color: white; Optional: background for better visibility 
    padding: 5px;  Optional: padding for better spacing */ 
  

    /* Responsive adjustments */
   @media (max-width: 600px) {
     .topnav { flex-direction: column; gap: 10px; }
     .gauges { gap: 30px; }
  }