body {
    width: 100%;
    min-width: 300px;
    margin: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
    /* font-family: -apple-system, BlinkMacSystemFont, sans-serif; */
    font-family: 'Poppins',sans-serif;
    overflow: auto;
    /* background: linear-gradient(315deg, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgb(25, 186, 255) 98%); */
    /* animation: gradient 15s ease infinite; */
    background-color: #FBFBFB;
    /* background-size: 400% 400%; */
    background-attachment: fixed;
    /* border: thin solid black; */
    justify-content: space-around;
    padding: 10px;
  }
  h1 {
    color: #0A63C3;
    /* color: #007bff; */
    font-size: 1.5rem;
    width: 95%;
    text-align: left;
    max-width: 850px;
    padding: 10px;
    margin: 20px 0px;
    font-weight: bold;
  }
  h2 {
      color: #26B6ED;
      /* color: #007bff; */
      font-size: 1.5rem;
      width: 95%;
      text-align: left;
      max-width: 850px;
      padding: 10px;
      margin: 20px 0px 10px 0px;
      font-weight: bold;
  }
  h3 {
      /* color: #26B6ED; */
      color: #007bff;
      font-size: 1.5rem;
      width: 95%;
      text-align: left;
      max-width: 850px;
      padding: 10px;
      font-weight: bold;
  }
  p {
      text-align: left;
      font-size: 1rem;
      width: 95%;
      padding: 5px;
      max-width: 850px;
  }
  strong {
      color: #0A63C3;
      font-weight: bold;
  }
  /* Style the <ol> element */
  .text ol {
      list-style-type: none; /* Remove default list numbering */
      counter-reset: list-counter; /* Reset the counter for custom numbering */
      padding-left: 0; /* Remove default left padding */
      width: 95%;
      max-width: 850px;
      margin-left: 30px;
  }
  
  /* Style the <li> elements within the <ol> */
  .text ol li {
      counter-increment: list-counter; /* Increment the counter for each list item */
      padding-left: 1.5em; /* Add padding for the list item content */
      position: relative; /* Position relative to allow absolute positioning of ::before pseudo-element */
      font-size: 1rem;
      padding-bottom: 10px;
      padding-right: 10px;
  }
.text ol li p, ul li p {
      margin: 0px;
      padding: 0px;
  }
  /* Style the ::before pseudo-element of <li> to create custom numbered circles */
.text ol li::before {
      content: counter(list-counter); /* Use the counter value as content */
      display: inline-block; /* Display as block element to style */
      width: 1.5em; /* Set width for the circle */
      height: 1.5em; /* Set height for the circle */
      border-radius: 50%; /* Make the element round */
      background-color: #0A63C3; /* Blue background color */
      color: white; /* White text color */
      font-weight: bold; /* Bold text */
      text-align: center; /* Center text horizontally */
      line-height: 1.5em; /* Center text vertically within the circle */
      position: absolute; /* Position the circle */
      left: -10px; /* Position the circle to the left of the content area */
      top: 0; /* Align the circle vertically with the content */
  }
  .text ul {
      list-style-type: none; /* Remove default list bullets */
      padding-left: 0; /* Remove default left padding */
      width: 95%;
      max-width: 850px;
      margin-left: 30px;
      position: relative; /* To ensure proper positioning of the bullets */
  }
  
  .text ul li {
      position: relative; /* To allow absolute positioning of the bullet */
      padding-left: 1em; /* Add padding to the left to make space for the bullet */
      margin-bottom: 10px; /* Add space between list items */
      font-size: 1rem;
  }
  
  .text ul li::before {
      content: ''; /* Empty content for the custom bullet */
      display: inline-block; /* Display as inline-block to style */
      width: 0.5em; /* Set width for the bullet */
      height: 0.5em; /* Set height for the bullet */
      border-radius: 50%; /* Make the bullet round */
      background-color: #0A63C3; /* Blue background color */
      color: white; /* White text color */
      text-align: center; /* Center text horizontally */
      line-height: 1.5em; /* Center text vertically within the bullet */
      position: absolute;
      left: 0;
      top: 0.25rem;
  }
  
  .horizontalFlexBoxCentered{
      display: flex;
      width: 95%;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      max-width: 850px;
      padding: 10px;
      flex-wrap: wrap;
  }
  .verticalFlexBoxCentered{
      display: flex;
      width: 95%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      max-width: 850px;
      padding: 10px;
  }