styles.css

/* shrink image in image, depending upon aesthetic preference
https://github.com/VincentGarreau/particles.js/ */

body {
  margin: 0;
  background-color: black;
}

#particles-js{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: -1;
}

@font-face {
  font-family: myFirstFont;
  src: url(Neou-Bold.ttf);
}

html, body, main {
  width: 100%;
  height: 100%;
}
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#scene {
  display: flex;
  align-items: center;
  margin: 0 auto;
  font-family: myFirstFont;
  font-size: 200%;
  align-items: center;
}
#poem {
  width: 300px;
  color: white;
  padding: 50px;
}
#icon {
  width: 400px;
  padding: 50px;
}
#spec {
  width: 300px;
  color: white;
  padding: 50px;
}

#mint {
  border: 1px green;
}

/* https://stackoverflow.com/questions/23856088/infinite-flip-image-using-css3-3d */
#icon > img {
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
  }
}
/* all other browsers */
@keyframes spinner {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to
  {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}