html,body{
	height: 99%;
	width: 99%;
}
*{
	box-sizing: border-box;
}
.banner{
	background-color: rgba(189, 215, 245, 0.8);
	margin: 15px;
	padding: 10px;
	border: 3px solid ##5e6a9c;
	box-shadow: 1px 3px 30px 1px #e5f1ff;
	text-transform: capitalize;
	text-shadow: 1px 1px #a0a3ba ;
	font-family: Monospace;
	height: 120px;
	text-align: left;
	font-style: italic;
}
h1{
	font-size: 0.8em;
}

#logo{
	width: 75px;
	position: absolute;
	top: 50px;
	right: 150px;
}
.container{
	border:2px #effaeb solid;
	position: relative;
	top: 2px;
	margin: 15px;
	padding: 10px;
	height: 700px;
	overflow: hidden;
	background-image: url("Background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.wave{
	border: #799a81 1px solid;
	color: whitesmoke;
	text-align: center;
	background-color: rgba(255,34,45, 0.5);
	font-size: 0.9em;
	height: 25px;
	overflow: hidden;
	width: 80%;
	position:relative;
	left: 10%;
	transition: height 4s;
	display:block;
}
#l1{
	border:#425f9a 1px solid;
	background-image:repeating-linear-gradient(#9dd0dd, #62a0c6);
}
#easy{
  border: #b9d0bb;
  background-image: repeating-radial-gradient(#a0d9aa, #84c67b);
  text-align: center;
}
#medium{
  border: #799a9a;
  background-color: #aacc7f;
  text-align: center;
}
#hard{
 border: #edffe0;
  background-color: #698458;
  text-align: center;
}
.wave:hover{
	height:90%;
	top:1px;
	z-index:1;
}