MBTI/static/css/title.css

/* test style */
@media screen and (max-width: 27em) {
  p {
    font-size: 11px;
  }
}


body {
  height: 100%;
}

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* mbti style */
.text--transparent {
  fill: transparent;
}

.anim-shape {
  -webkit-transform-origin: 0x 150px;
  transform-origin: 0x 150px;
  -webkit-transform: scale(0, 1) translate(0, 0);
  transform: scale(0, 1) translate(0, 0);
  -webkit-animation: moving-panel 3s infinite alternate;
  animation: moving-panel 3s infinite alternate;
}

.colortext .anim-shape:nth-child(1) {
  fill: #0E1826;
}

.colortext .anim-shape:nth-child(2) {
  fill: #166973;
}

.colortext .anim-shape:nth-child(3) {
  fill: #65BFA6;
}

.colortext .anim-shape:nth-child(4) {
  fill: #F2CD5C;
}

.colortext .anim-shape:nth-child(5) {
  fill: #F26444;
}

.shadow {
  -webkit-transform: translate(10px, 10px);
  transform: translate(10px, 10px);
}

.anim-shape--shadow {
  fill: #000;
  fill-opacity: .2;
}

@-webkit-keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 1) translate(20px, 0);
    transform: scale(1, 1) translate(20px, 0);
  }
}

@keyframes moving-panel {
  100% {
    -webkit-transform: scale(1, 1) translate(20px, 0);
    transform: scale(1, 1) translate(20px, 0);
  }
}


div.content {
  font: 800 14em/1 'Open Sans', Impact;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}

.page-header {
  padding-top: 50px;
}

svg {
  display: block;
  text-transform: uppercase;
}