html,body{
	height: 99%;
	width: 99%;
}
*{
	box-sizing: border-box;
}
/*Change the background of the entire page*/
body{background-color: #2b7a78;
}

.banner{
	background-color: #3aafa9; /*Change banner backgrond*/
	margin: 15px;
	padding: 10px;
	border: 2px solid #000000; /*Change border color and weight*/
	box-shadow: 1px 3px 30px 1px white; /*Change banner shadow color*/
	text-transform: capitalize;
	text-shadow: 1px 1px white; /*Change text shadow color*/
  /*Modify font style, location etc.*/
	font-family: serif;
	height: 150px;
	text-align: left; /*Change banner text location*/
  font-size: 19px;
	font-style: oblique; 
  font-weight: bolder;
  font-variant: small-caps;
}
h1{
	font-size: 0.7em;
}

#logo{
	width: 75px;
	position: absolute;
	top: 50px;
	right: 60px; /*Change location of the logo*/
}
.container{
	border:2px #000000 solid; /*Change container border color*/
	position: relative;
	top: 2px;
	margin: 15px;
	padding: 10px;
	height: 700px;
	overflow: hidden;
	background-color: #3aafa9; /*Change conatiner background color*/
}
.wave{
	border: #000000 1px solid; /*Change wave border color and weight*/
	color: black; /*Change wave text color*/
	text-align: center;
	background-color: #def2f1; /*Change wave background color*/
	font-size: 0.9em;
	height: 25px;
	overflow: hidden;
	width: 80%;
	position:relative;
	left: 10%;
	transition: height 4s;
	display:block;
  /*Modify wave font*/
  font-style: italic;
  font-family: serif;
  font-variant: small-caps;
}
#l1{
	border:#000000 1px solid;
	background-image:repeating-linear-gradient(#3aafa9, #def2f1);
  font-weight: bold;
  p{ 
    font-size: 25px; 
  } /*Modidy l1*/
}
.wave:hover{
	height:70%;
	top:1px;
	z-index:1;
}