/* Reset some default browser styles */
body, h1, h2, h3, p, a {
    margin: 0;
    padding: 0;
  }

  /* Make a background color */
  body {
    background-color: #f9f9f9;
    font-family: 'Arial', sans-serif; /* You can replace Arial with any nice font you like */
    color: #333;
    line-height: 1.6;
  }

  /* Center the whole page */
  .container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
  }

  /* Header Styles */
  header {
    /* background-color: #DAA520;  Goldenrod, a toned-down orange color */
    background-color: #50b3a2;
    color: white;
    text-align: center;
    padding: 1em 0;
  }

  header img {
    width: 100px;
  }

  header h1 {
    font-size: 2em;
  }

  /* h2 Styles */
  h2 {
    background-color: #50b3a2;
    /* background-color: #DAA520;  Goldenrod, a toned-down orange color */
    color: white;  /* Same text color as header */
    padding: 0.5em 0;  /* Slightly less padding compared to the header */
    text-align: center;  /* Same text alignment as header */
    margin-top: 20px;  /* Additional margin at the top */
    border-radius: 8px;  /* Optional: Rounded corners */
  }

  /* Section Styles */
  section {
    margin: 20px 0;
    padding: 20px;
    text-align: center;
  }

  .centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%; /* You can adjust this percentage as needed */
  }

  .centered-image-small {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%; /* You can adjust this percentage as needed */
  }


  /* Footer Styles */
  footer {
    /* background-color: #CD853F;  Peru, a light brown color */
    /* background-color: #DAA520; Goldenrod, a toned-down orange color */
    background-color: #40a292;  /* Slightly darker shade of the header background */
    color: white;  /* Same text color as header */
    text-align: center;  /* Same text alignment as header */
    padding: 1em 0;  /* Same padding as header */
    position: relative;
    bottom: 0;
    width: 100%;
  }

  /* Style for Strong Emphasis (Similar to Bold) */
  .strong-emphasis {
    font-weight: bold;  /* Makes the text bold */
    color: #333;  /* Slightly darker than standard text for extra emphasis */
  }

  /* Style for Light Emphasis (Similar to Italic) */
  .light-emphasis {
    font-style: italic;  /* Makes the text italic */
    color: #666;  /* Lighter color for subtle emphasis */
  }

  /* Make text visually pleasant */
  p, h1, h2, h3 {
    margin-bottom: 1em;
  }

  a {
    color: #0077cc;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }