html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #444444;
}
@-webkit-keyframes wave{
	0%{ -webkit-transform: scale(1); }
	10%{ -webkit-transform: scale(1.1); }
	20%{ -webkit-transform: scale(1); }
	100%{ -webkit-transform: scale(1); }
}

#position {
	position: absolute; 
	left: 50%; 
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;
	background: white;
}
.color{
	position: absolute;
    left: 50%; 
    top: 50%;
    -webkit-transform-origin: center center;
	-webkit-animation: wave 2.5s .3s linear infinite;
}

	#deepgreen{
		width: 80px;
		height: 80px;
        margin-left: 130px;
        margin-top: 130px;
		border-radius: 70px;
		border: 30px solid #14A844;
	}
	#lightgreen{
		width: 140px;
		height: 140px;
        margin-left: 100px;
        margin-top: 100px;
		border-radius: 100px;
		border: 30px solid #53FF65;
		-webkit-animation-delay: .1s;
	}
	#yellow{
		width: 200px;
		height: 200px;
        margin-left: 70px;
        margin-top: 70px;
		border-radius: 130px;
		border: 30px solid #FFEB0D;
		-webkit-animation-delay: .2s;
	}
	#orange{
		width: 260px;
		height: 260px;
        margin-left: 40px;
        margin-top: 40px;
		border-radius: 160px;
		border: 30px solid #FFBB14;
		-webkit-animation-delay: .3s;
	}
	#red{
		width: 320px;
		height: 320px;
        margin-left: 10px;
        margin-top: 10px;
		border-radius: 190px;
		border: 30px solid #F75C3E;
		-webkit-animation-delay: .4s;
	}
	#purple{
		width: 380px;
		height: 380px;
        margin-left: -20px;
        margin-top: -20px;
		border-radius: 220px;
		border: 30px solid #7A0BD6;
		-webkit-animation-delay: .5s;
		}
	#deepblue{
		width: 440px;
		height: 440px;
        margin-left: -50px;
        margin-top: -50px;
		border-radius: 250px;
		border: 30px solid #4D69F9;
		-webkit-animation-delay: .6s;
	}
	#lightblue{
		width: 500px;
		height: 500px;
        margin-left: -80px;
        margin-top: -80px;
		border-radius: 280px;
		border: 30px solid #32D7FF;
		-webkit-animation-delay: .7s;
	}