/* code modified from https://codepen.io/shelvinsworld/pen/povNVvp */

body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #334c60;
}

@font-face {
  font-family: 'MyFont';
  src: url('Silent Echo DEMO.otf') format('opentype');
}

/* text attributes */

.text-container {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: white;
  font-family: 'MyFont';
  font-size: 3vw;
  letter-spacing: 0.4em;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

span {
  display: inline-block;
}

p {
  font-size: 1.5vw;
  font-family: 'MyFont';
  letter-spacing: 0.2em;
  color: white;
}

h1 {
  font-size: 2vw;
  font-family: 'MyFont';
  letter-spacing: 0.2em;
  color: #94a6b4;
}

h1:hover{

    color: #df987f;
  }


/* text animation */

.reg-text {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  transition: opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
  transition: transform 3.3333333333s ease-out, opacity 5s ease;
  transition: transform 3.3333333333s ease-out, opacity 5s ease, -webkit-transform 3.3333333333s ease-out;
}
.reg-text.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* animating each letter of "nai nai" */

.letter {
  transition: opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease;
  transition: transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 5s ease, opacity 5s ease, -webkit-transform 5s cubic-bezier(0.43, 0.1, 0.57, 0.9), -webkit-filter 5s ease;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.letter:nth-of-type(2) {
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(3) {
  -webkit-filter: blur(1);
          filter: blur(1);
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px);
  transition-duration: 3.8461538462s;
}
.letter:nth-of-type(4) {
  -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
  transition-duration: 3.3333333333s;
}
.letter:nth-of-type(5) {
  -webkit-transform: translateY(-150px);
          transform: translateY(-150px);
  transition-duration: 2.5s;
}
.letter:nth-of-type(6) {
  -webkit-filter: blur(0.5);
          filter: blur(0.5);
  -webkit-transform: translateY(-180px);
          transform: translateY(-180px);
  transition-duration: 2.1739130435s;
}
.letter:nth-of-type(7) {
  -webkit-filter: blur(0.5);
          filter: blur(0.5);
  -webkit-transform: translateY(-155px);
          transform: translateY(-155px);
  transition-duration: 2.7777777778s;
}
.letter:nth-of-type(8) {
  -webkit-filter: blur(1.5);
          filter: blur(1.5);
  -webkit-transform: translateY(-190px);
          transform: translateY(-190px);
  transition-duration: 4.1666666667s;
}
.letter.loaded {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-filter: blur(0);
          filter: blur(0);
}