:root {
      --primary-blue: #e3f2fd; /* Very light blue for backgrounds */
      --secondary-blue: #bbdefb; /* Light blue for accents */
      --primary-gray: #f8f9fa; /* Light gray for backgrounds (not used for body anymore) */
      --secondary-gray: #9e9e9e; /* Medium gray for text/borders */
      --heading-red: #ef9a9a; /* Light red for headings */
      --heading-red-hover: #e57373; /* Darker red on hover */
      --text-color: #424242; /* Body text color */
      --border-color: #dee2e6; /* Light gray border */
    }

    body {
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background-color: var(--primary-blue); /* Changed to light blue */
      color: var(--text-color);
    font-size: 20px;
    line-height: 1.5;
    }

    .main-content-wrapper {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 2rem;
      margin-top: 2rem;
      margin-bottom: 2rem;
    width: 940px;
    margin:auto;
    }

    h1 {
      color: var(--heading-red); /* Changed to light red */
      margin-bottom: 1rem;
      transition: color 0.3s ease; /* Smooth transition for hover */
    font-weight: normal;
    margin-top: 0px;
   	font-size: 40px;
    }
h2 {
    font-weight: normal;
}

    h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
      color: var(--heading-red-hover); /* Darker red on hover */
    }

    a {
      color: var(--secondary-blue);
      text-decoration: none;
    }

    a:hover {
      color: #64b5f6; /* Slightly darker blue on hover */
      text-decoration: underline;
    }

hr {
      margin: 2rem 0;
    }
img {
    border-radius: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); width: 940px;
}