body {
      margin: 0;
      overflow-x: hidden; /* Ensure no horizontal scrolling */
      background-color: whitesmoke;
      font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    }

    .wrapper {
      width: 100%;
      height: 100vh;
      margin: 0 auto;
      display: grid;
      place-items: center;
    }

    .content {
      width: 100%; /* Make content fill the wrapper without spilling */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 20px; /* Optional padding */
      box-sizing: border-box; /* Ensure padding doesn’t add to width */
    }

    .headerText {
      width: 85%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px;
      background-color: whitesmoke; /* Background to ensure visibility */
      position: sticky; /* Makes it stick to the top */
      top: 0; /* Sticks to the top of the viewport */
      z-index: 1000; /* Ensure it stays above other content */
    }
    
    .content h2 {
      font-weight: normal;
      font-family: "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
      text-align: center; 
      font-size: 16px;
      padding-top: 10px;
    }

    .headerText h1 {
      padding: 10px;
      border: 3px solid #0033b3;
      border-radius: 10px;
      font-style: italic;
      cursor: pointer;
      font-weight: normal;
      font-family: "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
      text-align: center;
      overflow: hidden; /* Ensures gradient stays inside the border */
      font-size: 30px; /* Example size */
      line-height: 1.5;
      margin-top: 0px;
    }
    
    a {
      border: 3px solid #0033b3;
      border-radius: 10px;
      font-style: italic;
      cursor: pointer;
      font-weight: normal;
      font-family: "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
      text-align: center;
      color: white;
      background-color: #0033b3;
      text-decoration: none;
      height: calc(30px * 1.5 + 20px);
      font-size: 16px; /* Match the font size */
      line-height: 1.5;
      padding: 0 10px;
      display: flex; /* Use flexbox to align text inside */
      justify-content: center; /* Horizontal centring */
      align-items: center;
      vertical-align: baseline;
      position: relative;
      top: 0px; /* Adjust as needed to align perfectly */
    }
    a:hover {
      color: black;
      background-color: white;
      text-decoration: none;
    }

    .bodyContent {
      width: 100%; /* Full width without exceeding the parent */
      max-width: 1200px; /* Optional: limit to avoid excessive stretching */
      display: flex;
      justify-content: space-between;
      gap: 20px; /* Add spacing between columns */
      padding: 0 10px; /* Small horizontal padding for aesthetics */
      box-sizing: border-box;
    }

    .section {
      flex: 1; /* Make all sections flexible and equal width */
      min-width: 0; /* Prevent flexbox content from overflowing */
      display: flex;
      flex-direction: column;
      font-size: 14px;
      padding: 10px;
      border-radius: 5px;
    }

    .section figcaption {
      font-size: 12px;
      margin-top: 0%;
      text-align: center;
    }

    .section p,
    .section figcaption {
      filter: blur(5px);
      opacity: 0.6;
      transition: filter 0.3s, opacity 0.3s;
    }

    .section img {
      filter: blur(9px);
      opacity: 0.6;
      transition: filter 0.3s, opacity 0.3s;
      padding: 20px;
      padding-bottom: 5px;
    }

    .section p.active {
      filter: blur(0);
      opacity: 1;
    }

    .section img.active,
    .section figcaption.active {
      filter: blur(0);
      opacity: 1;
    }