body {
	color: #FFFF00;
	background-image: url("background.png");
}

div {
	border: 5px outset #FFFF00;
}

.heading, .main, .submit-div {
	width: 50%;
	position: absolute;
	top: 50px;
	left: 25%;
	text-align: center;
	background-color: #db8523;
	margin-bottom: 50px;
}

.main {
	top: 200px;
}

.submit-div {
	display: none;
	top: 500px;
}

#flavor-panel {
	display: none;
	width: 20%;
	position: absolute;
	top: 20%;
	left: 2.5%;
	text-align: center;
	background-color: #db8523;
}

#prizes-panel {
	display: none;
	width: 20%;
	position: absolute;
	top: 30%;
	left: 77.5%;
	text-align: center;
	background-color: #db8523;
}

#image {
	width: 200px;
	height: 200px;
	border: 5px outset #FFFF00;
}

#login-btn {
	display: block;
	margin: auto;
	margin-bottom: 20px;
	padding: 10px;
}

#logout-btn, #adventure-text, #input, #submit, #problem-text, #error-text {
	display: none;
	margin: auto;
	margin-bottom: 20px;
	padding: 10px;
	
}

#login-btn, #logout-btn, #input, #submit {
	width: 30%;
	margin: auto;
}

#adventure-text {
	width: 50%;
}

#problem-text {
	color: black;
	background-color: #FFFF00;
}

#error-text {
	color: red;
}

h1, h2, h3, ul {
	font-family: 'Amatic SC', cursive;
}

ul {
	font-size: 30px;
}

h3 {
	font-weight: bold;
}

#problem-text {
	font-family: 'Lato', sans-serif;
}

button {
	background-color: black;
	color: #FFFF00;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	border: none;
}