
<center> <!-- first made for the "./about" page-->
  <div class="max-w-xl">
    <div class="min-w-full">
      <style>
        /*  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: 70px 25px;
          border-bottom-right-radius: 70px 25px;
          border-top-left-radius: 70px 25px;
          border-top-right-radius: 70px 25px;
        }
        .shadow-geometry {
          box-shadow: 4px 6px 6px #86888f;
        }
        .shadow-geometry:hover {
          box-shadow: 4px 6px 6px #575757;
          transition: 500ms;
        }
      </style>
      <div x-data="{ expanded: false }" class="bg-gray-300 elliptical-geometry mx-2 shadow-geometry">
        <button tabindex="1" @click="expanded = ! expanded" class="roboto-font elliptical-geometry min-w-full bg-gray-400 duration-200 focus:bg-gray-700 focus:text-white hover:bg-gray-700 hover:text-gray-100 prompt-font transition px-2 py-1 rounded shadow-geometry text-gray-900 text-xl">
          <div class="mx-2">
          <%- title %>
          </div>
        </button>
        <div x-show="expanded" x-collapse.duration.500ms>
          <div class="bpg-arial-font prompt-font text-gray-900 px-8 py-4 text-justify">
            <%- description %>
          </div>
        </div>
      </div>
    </div>
  </div>
</center>
