.animated {
  animation: colorchange 4s forwards;
  animation-delay: 1s;
}
/*
@keyframes colorchange {
  from {color:#515151; background: black;}
	50% {color:white; background: #bfb2c1;}
	70% {color:#a3a3a3; background: black;}
  to	{color:#515151; background: black;}
}*/

.secretSubtitle span::before {
  content: "art, books, and blog";
  animation: contentchange 1.4s forwards;
  animation-delay: .7s;
}

.secretSubtitle span {
  animation: contentcolorchange 4s forwards;
  animation-delay: 1s;
}

.animatedBookHeader {
  animation: colorchange 4s forwards;
  animation-delay: 1s;
}

@keyframes colorchange {
	from {background: #0D1821; }
	50% {color: white; background:#8FBDB8 }
	70% {color:#a3a3a3; background: #344966;}
	to {color:#8FBDB8; background:#0D1821;}
}

@keyframes contentchange {
  0% {content: "art, books, and blog";}
  7% {content: "art, books, and blos";}
  14% {content: "art, books, and bess";}
  21% {content: "art, books, and less";}
  28% {content: "art, books, andeless";}
  35% {content: "art, books, aaceless";}
  42% {content: "art, books, raceless";}
  49% {content: "art, books Graceless";}
  56% {content: "art, booka Graceless";}
  63% {content: "art, boila Graceless";}
  70% {content: "art, bLila Graceless";}
  77% {content: "art, Lila Graceless";}
  84% {content: "art Lila Graceless";}
  91% {content: "a Lila Graceless";}
  98% {content: "Lila Graceless";}
  100% {content: "Lila Graceless";}
}

@keyframes contentcolorchange {
  from {}
	50% {color: #383d39;}
	70% {color:#ededed;}
	to {color:#C1E3D6;}
}