/* SETUP */

html,
body {
	margin: 0;
	padding: 0;
}

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #BB0980;
}

#hydra {
	z-index: -1;
	height: 100%;
	width: auto;
}

#container {
	display: block;
	position: relative;
	width: 100%;
}

/* ART LAYERS */

#F {
	margin: auto;
	position: absolute;
	mix-blend-mode: difference;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
}

#A {
	margin: auto;
	position: absolute;
	mix-blend-mode: color-burn;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 4;
}

#B {
	margin: auto;
	position: absolute;
	mix-blend-mode: multiply;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
}

#C {
	margin: auto;
	position: absolute;
	mix-blend-mode: overlay;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
}

#D {
	margin: auto;
	position: absolute;
	mix-blend-mode: exclusion;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
}


#G {
	margin: auto;
	position: absolute;
	mix-blend-mode: normal;
	opacity: 0.91;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 3;
}

/* ANIMATIONS */

@-webkit-keyframes rotation

/* Safari and Chrome */
	{
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotation {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.rotate-b {
	-webkit-animation: rotation 5s linear infinite;
	-moz-animation: rotation 5s linear infinite;
	-ms-animation: rotation 5s linear infinite;
	-o-animation: rotation 5s linear infinite;
	animation: rotation 5s linear infinite;
}

.rotate-c {
	-webkit-animation: rotation 9s linear infinite;
	-moz-animation: rotation 9s linear infinite;
	-ms-animation: rotation 9s linear infinite;
	-o-animation: rotation 9s linear infinite;
	animation: rotation 9s linear infinite;
}

.rotate-d {
	-webkit-animation: rotation 17s linear infinite;
	-moz-animation: rotation 17s linear infinite;
	-ms-animation: rotation 17s linear infinite;
	-o-animation: rotation 17s linear infinite;
	animation: rotation 17s linear infinite;
}