div {
	max-width: 800px;
	margin: auto;
	text-align: center;
	font-family: 'Indie Flower', cursive;
}
img {
	width: 50%;
	height: auto;
}
/*===============================================================*/
@import url('https://fonts.googleapis.com/css?family=Oswald:700');
@import url('https://fonts.googleapis.com/css?family=Rubik');

body {
/*  background-color:#3757D0;
  background-image:radial-gradient(#81BCFF, #303391);*/
/*  background-size:100%;
  background-repeat:no-repeat;
  background-attachment:fixed;*/
  color:#000000;
  text-align:center;
}

#rotate-words {
  max-width:400px;
  margin:0 0;
  padding:10% 0;
  font-size:2.2em;
  text-transform:uppercase;
  font-family: 'Oswald', sans-serif;
}

#rotate-words span {
  display:block;
  height:50px;
  font-size:.7em;
  text-transform:none;
  opacity:.8;
font-weight: bold;
}

#rotate-words div {
 position:fixed;
 opacity:0;
 overflow:hidden;
 left:30vw;
 width:80vw;
 line-height:1.2em;
 animation: rotate-word 32s linear infinite 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 4s}
#rotate-words div:nth-child(3) { animation-delay: 8s;color:red;}
#rotate-words div:nth-child(4) { animation-delay: 12s;color:red;}
#rotate-words div:nth-child(5) { animation-delay: 16s;color:red;}
#rotate-words div:nth-child(6) { animation-delay: 20s;color:green;}
#rotate-words div:nth-child(7) { animation-delay: 24s;color:blue;}
#rotate-words div:nth-child(8) { animation-delay: 28s;color:grey;}

@keyframes author {
    0% { opacity: 0;  transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
    20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
    30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
    90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
    100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
}

p.bas {
  position: absolute; 
  bottom: 20px;
  left: 10%;
  margin:auto;
  text-align: center;
  background-color: #000000;
  color:#FFFFFF;width: 80%;
  padding: 2em;font-family: 'Indie Flower', cursive;
}
p.bas a {
  color:#FFFFFF;
  font-family: 'Indie Flower', cursive;
  text-decoration: none;
}
p.bas a:hover {
  color:#FF0000;
}