html {
	height: 100%;
}

body {
	width: 1024px;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color: #000000;
}

#container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #ffffff;
	-webkit-filter: contrast(15);
	filter: contrast(15);
}

.blob {
	position: absolute;
	left: 50%;
	top: 15%;
	width: 25vh;
	height: 25vh;
	margin-left: -12.5vh;
	margin-top: -12.5vh;
	border-radius: 50%;
	background-color: #ff0000;
	-webkit-filter: blur(4vh);
	filter: blur(4vh);
	-moz-filter: blur(4vh);
	mix-blend-mode: multiply;
}

.stage1 .blob {
    -webkit-animation: blobMove 4s 2.5s ease infinite;
    animation: blobMove 4s 2.5s ease infinite;
}

@-webkit-keyframes blobMove {
    0% {
		left: 50%;
		top: 15%;
   }
    50% {
    	left: 50%;
    	top: 85%;
    }
    100% {
		left: 50%;
		top: 15%;
    }
}

@keyframes blobMove {
    0% {
		left: 50%;
		top: 15%;
   }
    50% {
    	left: 50%;
    	top: 85%;
    }
    100% {
		left: 50%;
		top: 15%;
    }
}

#blob2 {
	left: 70%;
	top: 35%;
	background-color: #ffff00;
}

.stage1 #blob2 {
    -webkit-animation: blob2Move 4s ease infinite;
    animation: blob2Move 4s ease infinite;
}

@-webkit-keyframes blob2Move {
    0% {
        left: 70%;
	 	top: 35%;
   }
    50% {
    	left: 30%;
    	top: 65%;
    }
    100% {
        left: 70%;
	 	top: 35%;
    }
}

@keyframes blob2Move {
    0% {
        left: 70%;
	 	top: 35%;
   }
    50% {
    	left: 30%;
    	top: 65%;
    }
    100% {
        left: 70%;
	 	top: 35%;
    }
}

#blob3 {
	left: 70%;
	top: 65%;
	background-color: #00ff00;
}

.stage1 #blob3 {
    -webkit-animation: blob3Move 4s 0.5s ease infinite;
    animation: blob3Move 4s 0.5s ease infinite;
}

@-webkit-keyframes blob3Move {
    0% {
		left: 70%;
		top: 65%;
   }
    50% {
    	left: 30%;
    	top: 35%;
    }
    100% {
		left: 70%;
		top: 65%;
    }
}

@keyframes blob3Move {
    0% {
		left: 70%;
		top: 65%;
   }
    50% {
    	left: 30%;
    	top: 35%;
    }
    100% {
		left: 70%;
		top: 65%;
    }
}

#blob4 {
	left: 50%;
	top: 85%;
	background-color: #00ffff;
}

.stage1 #blob4 {
    -webkit-animation: blob4Move 4s 1s ease infinite;
    animation: blob4Move 4s 1s ease infinite;
}

@-webkit-keyframes blob4Move {
    0% {
		left: 50%;
		top: 85%;
   }
    50% {
    	left: 50%;
    	top: 15%;
    }
    100% {
		left: 50%;
		top: 85%;
    }
}

@keyframes blob4Move {
    0% {
		left: 50%;
		top: 85%;
   }
    50% {
    	left: 50%;
    	top: 15%;
    }
    100% {
		left: 50%;
		top: 85%;
    }
}

#blob5 {
	left: 30%;
	top: 65%;
	background-color: #0000ff;
}

.stage1 #blob5 {
    -webkit-animation: blob5Move 4s 1.5s ease infinite;
    animation: blob5Move 4s 1.5s ease infinite;
}

@-webkit-keyframes blob5Move {
    0% {
		left: 30%;
		top: 65%;
   }
    50% {
    	left: 70%;
    	top: 35%;
    }
    100% {
		left: 30%;
		top: 65%;
    }
}

@keyframes blob5Move {
    0% {
		left: 30%;
		top: 65%;
   }
    50% {
    	left: 70%;
    	top: 35%;
    }
    100% {
		left: 30%;
		top: 65%;
    }
}

#blob6 {
	left: 30%;
	top: 35%;
	background-color: #ff00ff;
}

.stage1 #blob6 {
    -webkit-animation: blob6Move 4s 2s ease infinite;
    animation: blob6Move 4s 2s ease infinite;
}

@-webkit-keyframes blob6Move {
    0% {
		left: 30%;
		top: 35%;
   }
    50% {
    	left: 70%;
    	top: 65%;
    }
    100% {
		left: 30%;
		top: 35%;
    }
}

@keyframes blob6Move {
    0% {
		left: 30%;
		top: 35%;
   }
    50% {
    	left: 70%;
    	top: 65%;
    }
    100% {
		left: 30%;
		top: 35%;
    }
}

p {
    position: fixed;
    bottom: 10px;
    width: 100%;
    opacity: 0.333;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}