html,body {
	padding:0;
	margin:0;
	position:relative;
	background-color:#000000;
}
.app {
	width:100%;
	display:flex;
	height:100vh;
	font-family:sans-serif;
	position:relative;
	justify-content:center;
	align-items:center;
}
.box {
	position:relative;
}
.box span {
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	margin:70px;
	display:inline-block;
	border-radius:100%;
	color:#ffffff;
}
.red {
	animation:change 3s ease-in-out infinite alternate;
}
.green {
	animation:change2 7s ease-in-out infinite alternate;
}
.blue {
	animation:change3 5s ease-in-out infinite alternate;
}
@keyframes change {
	0% {
	border:5px solid rgba(255,0,0,0);
	box-shadow:0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;
}
100% {
	border:5px solid rgba(255,0,0,1);
	box-shadow:0 0 70px rgba(255,0,0,1),0 0 15px rgba(255,0,0,0.6) inset;
}
}@keyframes change2 {
	0% {
	border:5px solid rgba(0,255,0,0);
	box-shadow:0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;
}
100% {
	border:5px solid rgba(0,255,0,1);
	box-shadow:0 0 70px rgba(0,255,0,1),0 0 15px rgba(0,255,0,0.6) inset;
}
}@keyframes change3 {
	0% {
	border:5px solid rgba(0,0,255,0);
	box-shadow:0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;
}
100% {
	border:5px solid rgba(0,0,255,1);
	box-shadow:0 0 70px rgba(0,0,255,1),0 0 15px rgba(0,0,255,0.6) inset;
}
}