#container {
	/*height: 1375px;*/
	/* this now becomes elastic */
	width: 70%;
	min-width: 600px;
	background-color: #330101;
	border-radius: 100px;
	border-color: #a54a00;
	border-style: solid;
	float: left;
    margin-left: 15%;
}

div {
	border-radius: 10px;
}
/* this rounds off the corners of all the divs */
#header {
	height: 100px;
	float: left;
	clear: left;
	margin-left: 15%;
	width: 70%;
	background-color: #353434;
	padding: 5px;
}

.textarea {
	float: left;
	clear: both;
	margin-left: 15%;
	width: 70%;
	background-color: black;
	color: silver;
	padding: 5px;
	margin-top: 5px;
	/* margin-top seperates each div I currently have to make it easier to tell where one ends and the next begins */
}

.pagetransfer {
	background-color: black;
	height: 50px;
	width: calc(25% - 36px);
	color: silver;
	margin: 5px;
	padding: 10px;
	border-radius: 5px;
	float: left;
	/*by telling the code to float left, it makes the menus at the top of the page move side by side instead of stacking like pancakes*/
	border-color: silver;
	border-style: solid;
	text-align: center;
	font-size: 20px;
}
body {
	background-color: black;
}
.puzzle{
	height: 50px
	width:50px;
	color: gray;
	margin: 5px
	padding: 10px;
	border-radius: 5px;
	float: right;
	font-size: 10px;
}
/*the section below alters the css code to apply different elements when the screen's width drops below 606 pixels*/
@media screen and (max-width:606px){
	#container {
		width: 95%;
		min-width: 0;
	}