@import url(https://fonts.googleapis.com/css?family=Lato:300,700,300italic);

html, body {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}
.wrapper {
  align-items: center;
  background-image: linear-gradient(to right, #861a54,#054f7d, #00a7cf, #efe348);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0,0,0,.5);
  display: flex;
  font-family: 'Lato', Arial, sans-serif;
  height: 100%;
  justify-content: center;
  /* Animation */
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients;
  flex-direction: column;
}
h1 {
  color: rgba(255, 255, 255, 0.1);
  font-size: 4.4em;
  text-align: center;
}
blockquote {
  color: rgba(255, 255, 255, 0.1);
  font-size: 4.4em;
  text-align: center;
  font-weight: bold;
}
@media (max-width: 830px) {
  h1 {
    font-size: 2em;
  }
  blockquote {
  font-size: 2em;
  font-weight: bold;
  }
}

@keyframes gradients {
    0%   {background-position: 0 0;}
    25% {background-position: 50% 0;}
    50% {background-position: 90% 0;}
    60% {background-position: 60%;}
    75% {background-position: 40%;}
    100%  {background-position: 0 0;}
}