/* Some kind of header tag is supposed to be here */
.main-header{
  color: red;
  margin-left: 0;/*padding&marginADDED*/
  padding-left: 0;
}

/* You should have input here */
.someinputhere {
  padding: 5px;
  margin: 5px;
  animation: rainbow 5s linear infinite;
  padding: 5px 0 5px 0;/*padding&marginADDED*/
  margin-left: 0;
  /* animationPROPERTY was m.i.a and i added it to the already existing color animation below */
}
/*/////////////////////////////////////////////////*/
/* missing styles+class', ADDED-ON */
.displaymycode {
  margin-bottom: 30px;
}
.name {
  border: 1px solid black;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 1em;
  width: auto;
  box-sizing: border-box;
  color: #000;
}
/*/////////////////////////////////////////////////*/
@keyframes rainbow {
  0% {
    color: red;
  }
  14% {
    color: orange;
  }
  28% {
    color: cyan;
  }
  42% {
    color: green;
  }
  57% {
    color: blue;
  }
  71% {
    color: indigo;
  }
  85% {
    color: violet;
  }
  100% {
    color: red;
  }
}

/* half of this class tag is in the html file already */
/* .-text { */
  /* animation: rainbow 5s linear infinite;          */
  /* -webkit-background-clip: text;                  */
  /* -webkit-animation: rainbow 5s linear infinite;  */
  /* animation: rainbow 5s linear infinite;          */
  /* }                                               */
/* This CODE ^^^^^is scrapped as duplicate/ineffecient */

@keyframes wave {
  0% {
    transform: translateX(-10);
  }
  25% {
    transform: translateX(20px) rotate(5deg);
  }
  50% {                 /*missing px to the 10*/
    transform: translateX(10) rotate(-5deg);
  }
  75% {
    transform: translateX(-20px) rotate(-5deg);
  }
  90% {
    transform: translateX(-10);/* missing (px)pixel units*/
  }
  100% {
    transform: translateX(-5); /* missing px here too*/
  }
}

.bold {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
}

.output {
  margin-top: 10px;
  font-size: 1.2em;
}