fdf.css

/* Main stylesheet for FlutterDash Factor
   Written by: DeltaPHC */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

body {
	background-color: #303030;
	color: #f0f0f0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

footer {
	margin-top: 2rem;
	font-size: 0.8rem;
}

a {
	color: #8080f0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	background-image: url(img/HeadingLine.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin: 0;
	padding: 0 0 4px 0;
}

section.episodes {
	
}

article.episode h2 {
	background-image: none;
	padding: 0;
}

article.episode {
	clear: both;
	background-color: #404040;
	padding: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

article.episode:nth-of-type(odd) {
	background-image: url(img/FluttershyBG.png);
	background-repeat: no-repeat;
	background-position: right 16px;
}

article.episode:nth-of-type(even) {
	background-image: url(img/RainbowDashBG.png);
	background-repeat: no-repeat;
	background-position: right 16px;
}

article.episode:after {
	content: "";
	display: table;
	clear: both;
}

section.point {
	font-size: 0.85rem;
	clear: both;
}

section.point img {
	width: 30%;
	float: left;
	margin: 0.5rem;
}

section.point p {
	padding: 0;
	margin: 0.25rem;
}

section.facts {
	width: 30%;
	float: left;
	margin: 0.5rem 0 0 0;
	padding: 0.5rem;
	background-color: #4a4a4a;
}

section.interpretation {
	width: 30%;
	float: left;
	margin: 0.5rem 0 0 0;
	padding: 0.5rem;
	background-color: #504040;
}

#s9e26 {
	transform: rotate(1deg) translateX(-1rem);
}

#s9e26 > section.point {
	transform: rotate(-2deg);
}

#s9e26 > section.point > img {
	animation-duration: 3s;
	animation-name: huespin;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
  
@keyframes huespin {
	from {
		filter: hue-rotate(0deg) blur(0px);
	}
	
	50% {
		filter: hue-rotate(180deg) blur(2px);
	}

	to {
		filter: hue-rotate(359.9deg) blur(0px);
	}
}

#s9e26 > section.point > section.facts {
	transform: rotate(3deg);
}

article.episode#s9e26 {
	background-image: url(img/RainbowDashBG.png), url(img/FluttershyBG.png);
	background-blend-mode: color-dodge, color-dodge;
	background-repeat: repeat-x, repeat-x;
}