/* page functionality, not required by students */
section.code {
	margin: 0 0 0 50px;
}
.css-rule {
	margin: 0 0 10px 0;
}
button {
	padding: 20px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
/* for demonstration purposes */
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav ul li {
	margin: 0;
	float: left;
}
nav ul li a, nav ul li a:link, nav ul li a:visited {
	text-decoration: none;
	color: white;
	font-size: 16px;
	display: block;
	box-sizing: border-box;
	width: 250px;
	height: 50px;
	background-color: black;
	text-align: center;
	padding-top: 15px;
	transition: color 0.7s, background-color 0.7s
} 
nav ul li a:hover, nav ul li a:active {
	background-color: orange;
	color: black;
} 
.clear {
	clear: both;
	margin: 20px;
}
.stretchy {
	width: 250px;
	height: 100px;
	background-color: red;
	transition: width 1s;
}
.stretchy:hover {
	width: 1000px;
}
.dot {
	position: relative;
	top: 50px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: orange;
	animation: moveIt 3s linear infinite alternate;
}
@keyframes moveIt {
	0%   { top: 50px; left: 0; background-color: orange; }
	50%  { top: 0px; left: 450px; background-color: yellow; }
    100% { top: 500px; left: 0; background-color: red; }
}