.main {
  text-align: center;
  margin-top: 50px;
}


.logo-name {
  font-size: 2em;
  animation: 2s anim2 infinite;/* alternate; */
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 4px 4px black;
}

.logo-header {
  /*background-image: url('../img/binary-wave-background.jpeg');*/
  /*background-image: url('../img/black-and-blue-alphabet-background.jpg');*/
  background-image: url('../img/pexels-luis-gomes-546819.jpg');
  background-color: black;
  background-size:     cover;                      /* <------ */
  background-repeat:   no-repeat;
  background-position: center center;              /* optional, center the image */
}

.spin {
  animation: 2s anim infinite;/* alternate;*/
}

@keyframes anim {
  0% {
    color: #99FFFF;
    transform: rotateY(0deg);
  }
  20%{ color: #99FFFF; }
  40%{ color: #7DD7FF;}
  60%{ color: #99FFFF;}
  100% 
  {
    color: #7DD7FF;
    transform: rotateY(360deg);
  }
}

@keyframes anim2 {
  0% {
    color: #99FFFF;
  }
  20%{ color: #99FFFF; }
  40%{ color: #7DD7FF;}
  60%{ color: #99FFFF;}
  100% 
  {
    color: #7DD7FF;
  }
}


@media screen and (max-width: 400px) {
  .emoji {
    display: block;
  }
  .logo-name{
    font-size: .75em;
  }
}

@media screen and (min-width: 400px) and (max-width: 1000px) {
  .emoji {
    display: block;
  }
  .logo-name{
    font-size: 1em;
  }
}

@media screen and (min-width: 1000px) {
  .logo-name{
    font-size: 2em;
  }
}