@charset "UTF-8";
/* CSS Document */
/*
	good color options
	dark forest green #085F63
	lighter green #49BEB7
	darker yellow #FACF5A
	light red #FF5959

*/


*{ /* affects all elements of the whole page */
	/*get rid of default padding and various other elements*/
	padding: 0;
	margin: 0;
	box-sizing: border-box;

}

html{ /* does the whole page */
	background-color: #085F63;
	color: #FACF5A;
}

body {
  	
	/*justify-content: space-around;*/
}

a
{
	background-color: #49BEB7;
	color: black;
}

ul.menu{
	text-align: center;
	background-color: #FF5959;
	padding-top: 20px;
	pading-bottom: 20px;
	padding-right: 10%;
	padding-left: 10%;

}

ul.menu li{
	align-content: center;
	display: inline-block;
	border-radius: 5px 5px 5px 5px;
	border-top: 3px solid black;
	border-left: 3px solid black;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	background-color: rgba(0,174,171,1);
	color: black;
	text-emphasis-color: lightblue;
	padding: 0px 10px;
	
	font-family: 'Reggae One', cursive;	
}

ul.menu li a{
	
	display: inline-block;
	color: black;
	text-decoration: none;
	padding: 5px 20px;
	border-radius: 5px 5px 5px 5px;
	font-size: 20px;
	transition-duration: 350ms;
	
	/*font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";*/
}

ul.menu li:hover, ul.menu li a.active{
	background-color: lightgray;
	text-align: center;
	
	
}

ul.menu li a:hover{
	
		padding: 5px 45px;
}


div.display{
	
	align-content: center;
	height: 20%;
	padding-left: 25%;
}

img{
	width: 50%;
	
	
}
div.displayWrapper div{
	
	display-content: center;
	padding-bottom: 80px;


	
}
h2{
	font-size: 40px;
	padding-top: 20px;
}

p.reflection{
	font-size: 30px;
	
}
div.reflection{
	padding-left: 15%;
	padding-right: 15%;
}


div.button{
	padding-top: 40px;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 70px;
	align-content: center;
	font-size: 20px;
	
}
button{

	padding: 15px;
}

div.header{
	align-content: center;
}