<style>
  /*
  // what follows is scss modified from this codepen:
  // https://codepen.io/raubaca/pen/PZzpVe
  // ...that have been compiled to css (from scss) here:
  // https://www.sassmeister.com/
  $midnight: #2c3e50;
  $clouds: #ecf0f1;
  // General
  body {
    color: $midnight;
    background: $clouds;
    padding: 0 1em 1em;
  }
  h1 {
    margin: 0;
    line-height: 2;
    text-align: center;
  }
  h2 {
    margin: 0 0 .5em;
    font-weight: normal;//
  }
  input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  // Layout
  .row {
    display:flex;
    .col {
      flex:1;
      &:last-child {
        margin-left: 0em;
      }
    }
  }
  // Accordion styles
  .tabs {
    border-top-left-radius: 70px 25px;
    border-top-right-radius: 70px 25px;
    border-bottom-left-radius: 70px 25px;
    border-bottom-right-radius: 70px 25px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
  }
  .tab {
    width: 100%;
    color: white;
    overflow: hidden;
    &-label {
      display: flex;
      justify-content: space-between;
      padding: 1em;
      background: $midnight;
      font-weight: bold;
      cursor: pointer;
      // Icon
      &:hover {
        background: darken($midnight, 10%);
      }
      &::after {
        content: "\276F";
        width: 1em;
        height: 1em;
        text-align: center;
        transition: all .35s;
      }
    }
    &-content {
      text-align: justify;
      max-height: 0;
      padding: 0 1em;
      color: $midnight;
      background: white;
      transition: all .35s;
    }
    &-close {
      display: flex;
      justify-content: flex-end;
      padding: 1em;
      font-size: 0.75em;
      background: $midnight;
      cursor: pointer;
      &:hover {
        background: darken($midnight, 10%);
      }
    }
  }

  // :checked
  input:checked {
    + .tab-label {
      background: darken($midnight, 10%);
      &::after {
        transform: rotate(90deg);
      }
    }
    ~ .tab-content {
      max-height: 100vh;
      padding: 1em;
    }
  }
  */

  /* This is the compiled CSS: */
  @charset "UTF-8";
  body {
    color: #2c3e50;
    background: #ecf0f1;
    padding: 0 1em 1em;
  }

  h1 {
    margin: 0;
    line-height: 2;
    text-align: center;
  }

  h2 {
    margin: 0 0 0.5em;
    font-weight: normal;
  }

  input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  .row {
    display: flex;
  }
  .row .col {
    flex: 1;
  }
  .row .col:last-child {
    margin-left: 0em;
  }

  .tabs {
    border-top-left-radius: 70px 25px;
    border-top-right-radius: 70px 25px;
    border-bottom-left-radius: 70px 25px;
    border-bottom-right-radius: 70px 25px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
  }

  .tab {
    width: 100%;
    color: white;
    overflow: hidden;
  }
  .tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: #2c3e50; /* necessary */
    font-weight: bold;
    cursor: pointer;
  }
  .tab-label:hover {
    background: #1a252f;
  }
  .tab-label::after {
    content: "‚ùØ";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
  }
  .tab-content {
    text-align: justify;
    max-height: 0;
    padding: 0 1em;
    color: #2c3e50; /* necessary */
    background: white;
    transition: all 0.35s;
  }
  .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    /* background: #2c3e50; unnecessary */
    cursor: pointer;
  }
  .tab-close:hover {
    background: #1a252f;
  }

  input:checked + .tab-label {
    background: #1a252f;
  }
  input:checked + .tab-label::after {
    transform: rotate(90deg);
  }
  input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }
</style>

<style media="screen">
  @media only screen and (max-width: 550px) {
    #desktop-title {
      display: none;
    }
  }

  @media only screen and (min-width: 551px) {
    #mobile-n-tablet-title {
      display: none;
    }
  }
</style>

<div class="">
  <br>
  <div class="mx-4">
    <!-- this title is for the desktop view in which the entire title is visable -->
    <h1 class="arial-rounded-mt-bold flex justify-center text-3xl" id="desktop-title">About Urban Cruise Ship</h1>

    <!-- As screens get smaller, we want the "About" to be above the "Urban Cruise Ship" -->
    <h1 class="arial-rounded-mt-bold flex justify-center text-3xl" id="mobile-n-tablet-title">About</h1>
    <h1 class="arial-rounded-mt-bold flex justify-center text-3xl" id="mobile-n-tablet-title">Urban Cruise Ship</h1>
    <h4 class="flex justify-center prompt-font">Founded in 2014, Urban Cruise Ship presents environmental solutions.</h4>
  </div>
  <br>

  <div class="flex justify-center prompt-font">
    <div class="max-w-xl">
      <div class="dropdown-tabs">
        <div class="row">
          <div class="col">
            <div class="tabs">

              <div class="tab">
                <input type="checkbox" id="chck1">
                <label class="focus:bg-gray-900 tab-label" onblur="handleOnBlur(this)" tabindex="1" for="chck1">Why the name "Urban Cruise Ship?"</label>
                <div class="tab-content">
                  <p>
                    This comes from the concept of taking something that works well now, due to good design,
                    and applying that elsewhere to solve problems. E.g. urban problems could be reduced if
                    cities were designed more like cruise ships: attractive and enjoyable, but compact and
                    with all residents' needs met within walking distance.
                  </p>
                  <br>
                  <p>
                    This is a classic application of design-approach transfer.&nbsp; Urban Cruise Ship also
                    explores other topics where this might work well.&nbsp;
                  </p>
                  <br>
                  <p>
                    Like a real ship, Urban Cruise Ship is navigational.&nbsp; Its crew takes visitors to
                    numerous ports of entry into different ways of solving problems.
                  </p>
                </div>
              </div>

              <div class="tab">
                <input type="checkbox" id="chck2">
                <label class="focus:bg-gray-900 tab-label" onblur="handleOnBlur(this)" tabindex="2" for="chck2">Why is Urban Cruise Ship Needed?</label>
                <div class="tab-content">
                  <p>
                    Progress in the modern environmental movement has been uneven in many key areas: biodiversity
                    loss/species extinction, habitat degradation, spreading invasive species, ocean acidification,
                    poor air quality, unhealthy water supplies, insufficiently-tested chemical exposures, lack of
                    adequate sanitation, accelerating waste generation and disposal, litter, urban sprawl, fossil
                    fuel depletion, climate change, storm/earthquake vulnerability, malnutrition, topsoil loss,
                    food shortages, obesity, unsheltered living conditions, forced migration, cultural loss, and
                    scenery defilement.&nbsp;
                  </p>
                  <br>
                  <p>
                    Education has spurred widespread desire for improvement in all of these areas, but to date,
                    current solutions have not kept pace with increasing needs. Hence, better solutions are VERY
                    much desired and needed now.
                  </p>
                </div>
              </div>

              <div class="tab">
                <input type="checkbox" id="chck3">
                <label class="focus:bg-gray-900 tab-label" onblur="handleOnBlur(this)" tabindex="3" for="chck3">What does Urban Cruise Ship seek to be?</label>
                <div class="tab-content">
                  <p>
                    We want to be a highly respected source of guidance, that provides the most helpful and accurate
                    data, practical and sufficient analysis, and workable solutions for ecological problems.
                  </p>
                </div>
              </div>

               <div class="tab">
                <input type="checkbox" id="chck4">
                <label class="focus:bg-gray-900 tab-label" onblur="handleOnBlur(this)" tabindex="4" for="chck4">Who started Urban Cruise Ship and why?</label>
                <div class="tab-content">
                  <p>
                    Mathematician Michael Goff and designer John van der Harst met via the Nashville
                    Peace and Justice Center, and worked together in Recycling Advocates of Middle Tennessee.&nbsp;
                    Both continued to work in various other organizations as well -- some with each other, and others
                    apart.&nbsp; Discussions continued over what worked and didn't.&nbsp;
                  </p>
                  <br>
                  <p>
                    Both wanted to maximize their effect. Each had prior preferences for future work, but
                    conservatively chose to work together first on fundamental analysis which would properly
                    prioritize choices systematically.&nbsp; That was, and is, Urban Cruise Ship.
                  </p>
                </div>
              </div>

               <div class="tab">
                <input type="checkbox" id="chck5">
                <label class="focus:bg-gray-900 tab-label" onblur="handleOnBlur(this)" tabindex="5" for="chck5">What became Urban Cruise Ship's priorities?</label>
                <div class="tab-content">
                  <p>
                    Initially, clean energy production was a top priority, due to public interest, time urgency,
                    and lack of progress to date. Land conservation was already high on our agenda.&nbsp;
                    However, systematic analysis revealed an even wider array of needs and solution "best deals."
                  </p>
                  <br>
                  <p>
                    Our standards section shows what our attitude has been toward analyzing our options.&nbsp;
                    Rigorously applying these standards, we reasoned, should result in the best set of priorities.
                  </p>
                  <br>
                  <p>
                    One type of priority emerged frequently: removal of special-interest subsidies, and getting
                    taxation and regulation right, solve problems in many areas efficiently, as they then allow
                    markets to drive the right choices thereafter.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- what follows is a single dropdown box -->
      <!--
      <br><br><br><br>

      <div class="dropdown-tabs">
        <div class="row">
          <div class="col">
            <div class="tabs">
               <div class="tab">
                <input type="checkbox" id="chck6">
                <label class="tab-label" for="chck6">What became Urban Cruise Ship's priorities?</label>
                <div class="tab-content">
                  <p>
                    Initially, clean energy production was a top priority, due to public interest, time urgency,
                    and lack of progress to date. Land conservation was already high on our agenda.&nbsp;
                    However, systematic analysis revealed an even wider array of needs and solution "best deals."
                  </p>
                  <br>
                  <p>
                    Our standards section shows what our attitude has been toward analyzing our options.&nbsp;
                    Rigorously applying these standards, we reasoned, should result in the best set of priorities.
                  </p>
                  <br>
                  <p>
                    One type of priority emerged frequently: removal of special-interest subsidies, and getting
                    taxation and regulation right, solve problems in many areas efficiently, as they then allow
                    markets to drive the right choices thereafter.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    -->
    </div>
  </div>
</div>

<script type="text/javascript">

  const myArray = document.getElementsByClassName("tab-label");

  document.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      for (const myElement of myArray) {
        console.log(myElement);
        myElement.click();
      }
    }
  });

  function handleOnBlur(that) {
   document.addEventListener("keyup", function(event) {
     console.log("This fires when the DOM node calling it goes out of focus")
   });
 }
</script>
