<div>
  <style>
    @media only screen and (max-width: 500px) {
      .table-titles, .table-cells {
        font-size: 9px;
        line-height: 100%;
      }
    }

    @media only screen and (max-width: 390px) {
      .table-titles, .table-cells {
        font-size: 6px;
        line-height: 100%;
      }
    }

    body {
      /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
      /*font-size: 14px; */
      /*line-height: 1.42857143; */
      /*color: #333; */
      /*background-color: #fff; */
    }

    /* this section is for the accordion */
    /* https://www.w3schools.com/howto/howto_js_accordion.asp */
    /* Style the buttons that are used to open and close the accordion panel */
    .set-accordion {
      background-color: rgb(238, 238, 238);
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
    }

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active,
    .set-accordion:hover {
      background-color: #ccc;
    }

    /* Style the accordion panel. Note: hidden by default */
    .panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
    }

    /* this section is for formatting the table */
    /* Sources for how to format tables: */
    /* https://www.html.am/html-codes/tables/table-background-color.cfm */
    /* https://freefrontend.com/css-tables/ */
    table,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th {
      color: white;
      background-color: #000;
      border: 1px solid white;
    }

    /*  these are pure-gray colors with no blue mixed in them at all, which
        is the case with the default Tailwind-CSS gray color pallete, we are
        not using any of these on the new website at the moment because they
        don't work as well with the contrasting black-to-white text on hover,
        buy we may want to use them in the future
    */
    .standard-gray { /* no blue mixed in, just pure grey */
      background-color: #777777ff;
    }
    .standard-gray-light { /* no blue mixed in, just pure grey */
      background-color: #f1f1f1ff;
    }
    .standard-gray-dark { /* no blue mixed in, just pure grey */
      background-color: #555555ff;
    }

    .elliptical-geometry {
      border-bottom-left-radius: 86px 34px;
      border-bottom-right-radius: 86px 34px;
      border-top-left-radius: 86px 34px;
      border-top-right-radius: 86px 34px;
    }
    .shadow-geometry {
      box-shadow: 4px 6px 6px #86888f;
    }
    .shadow-geometry:hover {
      box-shadow: 4px 6px 6px #575757;
      transition: 500ms;
    }
    .panel {
      background-color: #f1f1f1ff;
    }
    table {
      border-width: 3px;
    }
    .sets-accordion-group a {
      color:red;
    }
  </style>
  <center class="m-8">Endeavors</center>
  <!-- the dynamic accordians will display inside this div  -->
  <!-- these dynamic accordians house the dynamic endeavor set tables -->
  <div class="sets-accordion-group">
    <!-- the JavaScript will place the dynamic endeavor set tables right here -->
  </div>

  <!-- This is necessary to generate the dynamic endeavor set tables -->
  <!-- <script src="endeavor-displays-by-set.js"></script> -->
  <!--
        Our file is located at './site/history/endeavors' but we want to
        render it as './topic/history/endeavors' so we need the path below
        because when Express.js renders the resource, the resource ('./endeavors')
        thinks it is located at './site/history/endeavors' and so it will use that
        directory as a starting point to find any files in the application it is
        calling on
  -->
  <script src="../../site/history/endeavor-displays-by-set.js"></script>
  <script src="../../site/history/test-script.js"></script>
</div>
