<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url("https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600");
body {
  font-family: "Libre Franklin", sans-serif;
  background-color: #111;
}

.container {
  width: 350px;
  margin: 50px auto;
}
@media screen and (min-width: 768px) {
  .container {
    width: 615px;
  }
}

ul {
  padding: 0 0 0 10px;
}

ul, li, .rainbow {
  list-style: none;
  font-weight: 500;
  color: white;
  letter-spacing: 10px;
  text-transform: uppercase;
  font-size: 28px;
}
@media screen and (min-width: 768px) {
  ul, li, .rainbow {
    font-size: 54px;
  }
}

li:nth-child(7n+1) {
  color: #FFF168;
}

li:nth-child(7n+2) {
  color: #2284C0;
}

li:nth-child(7n+3) {
  color: #FF6531;
}

li:nth-child(7n+4) {
  color: #00BB58;
}

li:nth-child(7n+5) {
  color: #F8B240;
}

li:nth-child(7n+6) {
  color: #EB2526;
}

li:nth-child(7n+7) {
  color: #AEEAF4;
}

input[type=text] {
  display: block;
  margin: auto;
  width: 150px;
  height: 10px;
  padding: 15px;
  background: transparent;
  border: 1px solid white;
  outline: none;
  color: white;
  font-size: 18px;
}
input[type=text]::-moz-placeholder {
  color: #ECECEC;
  opacity: 0.8;
}
input[type=text]:-ms-input-placeholder {
  color: #ECECEC;
  opacity: 0.8;
}
input[type=text]::placeholder {
  color: #ECECEC;
  opacity: 0.8;
}
@media screen and (min-width: 768px) {
  input[type=text] {
    width: 250px;
    height: 20px;
  }
}
  </style>
 </head>
 <body translate="no">
  <div class="container" id="app">
   <input maxlength="11" placeholder="Enter Text" type="text" v-model="message"/>
   <ul>
    <li class="rainbow">
     {{firstMessage}}
    </li>
    <li class="rainbow">
     {{secondMessage}}
    </li>
    <li class="rainbow">
     {{thirdMessage}}
    </li>
    <li class="rainbow">
     {{fourthMessage}}
    </li>
    <li class="rainbow">
     {{fifthMessage}}
    </li>
    <li class="rainbow">
     {{sixthMessage}}
    </li>
    <li class="rainbow">
     {{seventhMessage}}
    </li>
   </ul>
  </div>
 </body>
</html>
