<body>
	<div1 class="box1"></div1>
	<div2 class="box1"></div2>
	<p class="intro">ERROR 408
		<p class="message">Server did not respond in time</p>
	</p>

	
	<!--<svg height="200" width="400">
		<text x="10" y="20" fill="black" transform="rotate(-15 200,-100)">That's All Folks<tspan x="24" y="40">ERROR 408</tspan></text>
	</svg> -->

</body>
body{
	width: 100%;
	height: 100%;
	padding: 0px;
	background-color:lightgray;
}
p.intro{
	color:black;
	position:absolute;
	top:50%;
	left:50%;
	margin-right:-50%;
	transform:translate(-50%,-120%);
	/*align-items:center;
	text-align:center;
	justify-content:center;*/
	font-size:4em;
	font-family:"Courier New",serif;	
	font-style:oblique;
}
p.message{
	margin:0;
	position:fixed;
	top:50%;
	left:50%;
	margin-right:-50%;
	transform:translate(-50%,100%);
	color:darkgray;
	font-size:2em;
}


.box1 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30px;
	width: 30px;
	background: transparent;
	//border: solid black;
}
.box2 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30px;
	width: 30px;
	background: green;
	//border: solid black;
}
/*svg{
	position: center;
}*/
div1{
	width:20px;
	height:20px;
	//border-style: outset;
	//border-radius: 50% 50% 0 0;
	border-radius:50%;
	background-color:blue;
	position: relative;
	animation-name: circle1;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	//animation-play-state:paused;
	/* comment out play/pause above when working */	
}
div2{
	width:20px;
	height:20px;
	//border-style: outset;
	border-radius: 50%;
	background-color:yellow;
	position: relative;
	animation-name: circle2;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	//animation-play-state:paused;
	/* comment out play/pause above when woring */
}

/*or make pink*/
@keyframes circle1 {
	0%{background-color:purple; left:2%; top:5%;}
	25%{background-color:red; left:95%; top:5%;}
	50%{background-color:purple;left:95%; top:90%;}
	75%{background-color:blue;left:2%; top:90%;} 
	100%{background-color:purple; left:2%; top:5%;}
}
/* HAVE SIMPLE ALTERNATING COLORS*/
@keyframes circle2 {
	0%{background-color:purple; left:95%; top:90%;}
	25%{background-color:red; left:2%; top:90%;}
	50%{background-color:purple;left:2%; top:5%;}
	75%{background-color:blue;left:95%; top:5%;} 
	100%{background-color:purple; left:95%; top:90%;}
}
/*HAVE PACMAN CHASING*/
/*@keyframes circle2 {
	0%{background-color:yellow; left:95%; top:90%;}
	25%{background-color:yellow; left:2%; top:90%;}
	50%{background-color:yellow;left:2%; top:5%;}
	75%{background-color:yellow;left:95%; top:5%;} 
	100%{background-color:yellow;left:95%; top:90%;}
}
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.