<!-- https://www.geeksforgeeks.org/how-to-create-fade-in-effect-on-page-load-using-css/ -->
<!DOCTYPE html>
<html>
  <head>

    <!-- this is what prevents the text & images from shrinking in the mobile versions -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <!-- Script you need to read alpine.js -->
    <script src="//unpkg.com/alpinejs" defer></script>

    <!-- internal css file -->
    <link rel="stylesheet" type="text/css" href="./tailwind-css/styles.css">
    <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->

    <style>
      img[name~="first"]{
        opacity: 0; /* start with no opacity */
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 0s; /* delay the onset of the opaque image transition */
      }
      img[name~="second"]{
        opacity: 0; /* start with no opacity */
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 0.5s; /* delay the onset of the opaque image transition */
      }
      img[name~="third"]{
        opacity: 0; /* start with no opacity */
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 1s; /* delay the onset of the opaque image transition */
      }
      img[name~="forth"]{
        opacity: 0; /* start with no opacity */
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 1.5s; /* delay the onset of the opaque image transition */
      }
      img[name~="fifth"]{
        opacity: 0; /* start with no opacity */
        animation: fadeInAnimation ease 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 2s; /* delay the onset of the opaque image transition */
      }
      @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
      }
    </style>
    <title>RAM Animation Logo</title>
  </head>
  <body>
    <span><text class="m-4 transition duration-500 ease-in-out font-bold uppercase p-4 border-b border-gray-100">RAM Logo Demonstration</text><button class="rounded-full m-2 px-2 py-1 bg-yellow-400 text-yellow-900" onClick="window.location.reload();">click here to see the animation again</button></span>
    <button class="ml-4 rounded-full m-2 px-2 py-1 bg-blue-400 text-blue-900"><a href="/layoutandpartials">test site</a></button>
    <p class="max-w-screen-sm m-4 text-gray-600 text-xl">This is a first-draft animation.&nbsp; First the earth should appear, then the U.S., then Tennessee, then the RAM Title at the bottom.</p>
    <div class="m-4">
      <img class="left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/0.jpg" name="spaceholder" alt="earth">
      <img class="absolute left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/1.jpg" name="first" alt="earth">
      <img class="absolute left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/2.jpg" name="second" alt="earth">
      <img class="absolute left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/3.jpg" name="third" alt="earth">
      <img class="absolute left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/4.jpg" name="forth" alt="earth">
      <img class="absolute left-0 inline m-2 w-11/12 max-w-screen-sm" src="/images/ramlogo/5.jpg" name="fifth" alt="earth">
    </div>
  </body>
</html>
