So My Last #poetryPort Poem for remix failed, which to me is no better way to honor that which is all poetry, remix

It was supposed to live here at https://jgregorymcverry.com/heavenlyremixes It was a remix of me, some NASA images, and inspiration and words from Alistair Reynolds.

Work is hard science poetry. Gotta slog through universe development but I dig the questions left in spaces between words.

Poem didn't work. I messed it up. I think might just be the image size. I was trying to go smaller. Too tired to test, but make sense.

Anywhoo heres  how the poem could have danced in a new light in a darkened room:

The margins just me chasing words I know are there. Kinda how poetry works.

<div id="darkstar">
      <!-- Goal is to have each div fade in and out on the 3 second counter-->
     
     <div  class="crashes">
       <p class="myjam">All stars sing<br />
        remixing<br />
            the first<br />
        beat<br /></p>
     </div>
       <div class="pouring">
       <p class="myjam">outer layers <br />
           belting tunes<br />
      in heaven's lonely embrace</p>
     </div>
     <div class="light">
       <p class="myjam">Rhythms arise<br />
        spun on quantum tectronics<br />
      needle oscilliating<br />
    from the core</p>
     </div>
     <div class="intoAshes">
       <p class="myjam">As the galaxies<br />
        dance to their<br /></p>
     </div>
      <div class="ReasonTatters">
       <p class="myjam">own rhytm
      </p>
     </div>
      <div class="ForcesTear">
       <p class="myjam">as we whistle </p>
     </div>
      <div class="LooseFromAxis">
       <p class="myjam">to the same tune</p>
     </div>
     
    </div>

#darkstar > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 21s linear infinite 0s;
    -moz-animation: imageAnimation 21s linear infinite 0s;
    -o-animation: imageAnimation 21s linear infinite 0s;
    -ms-animation: imageAnimation 21s linear infinite 0s;
    animation: imageAnimation 21s linear infinite 0s;
}

#darkstar > div:nth-child(2)  {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
#darkstar > div:nth-child(3) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
#darkstar > div:nth-child(4) {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
#darkstar > div:nth-child(5) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

#darkstar > div:nth-child(6) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}

#darkstar > div:nth-child(7) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.crashes  {
  background:  url("/photos/DarkStar/shallwego.jpg") no-repeat fixed center;
}
.pouring  {
  background:  url("/photos/DarkStar/youandiwhilewecan.jpg") no-repeat fixed center;
}
.light  {
  background:  url("/photos/DarkStar/throughthetransitivenightfall.jpg") no-repeat fixed center;
}
.intoAshes  {
  background:  url("/photos/DarkStar/ofdiamonds.jpg") no-repeat fixed center;
}

.ReasonTatters  {
  background:  url("/photos/DarkStar/mirrorshattersinformless.jpg") no-repeat fixed center;
}
.ForcesTear  {
  background:  url("/photos/DarkStar/reflectiosnofmatter.jpg") no-repeat fixed center;
}
.LooseFromAxis {
  background:  url("/photos/DarkStar/glasshanddissolving.jpg") no-repeat fixed center;
}

.myjam  {
color:white;
font-size:5.7vh;
margin-top:-20%;
margin-letf: 20%;
}
  @-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}