/* this isn't part of it */

body, html {
	margin: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url(circle.jpg);
    background-attachment:fixed;
}

circle {
	display:block;
	width:12vw;
	background:deeppink;
	animation:first 16s linear alternate infinite;
}

@keyframes first {
	0% {height:0vh;} 
	5% {height:0vh;}
	25% {height:60vh;} /* 5s */
	75% {height:60vh;} /* 12s */
	90% {height:0vh;}
	100% {height:0vh;} /* 16s */
}

square {
	display:block;
	height:12vw;
	width:0vw;
	margin-top:-12vw;
	background:deeppink;
	animation:second 16s linear alternate infinite;
}

@keyframes second {
	0% {width:0vw;}
	25% {width:0vw;}
	50% {width:60vw;}
	55% {width:60vw;}
	80% {width:0vw;}
}

/* POEM INSTRUCTIONS */

opendevtools {
	position:fixed;
	z-index:99999;
	top:0;
	right:0;
	margin:5vh 5vw;
	padding:2vh 2vw;
	font-family:consolas;
	letter-spacing:0.1em;
	font-size:0.65em;
	color:white;
	background:blue;
	display:block;
	cursor:pointer;
	opacity:0;
	transition:.4s ease-in-out;
}

opendevtools.show {
	opacity:0.99;
	transition:.2s ease-in-out;
}