html,body{
  height: 99%;
  width: 99%;
}
*{
  box-sizing: border-box;
}
.banner{
  background-color: rgba(243, 220, 248);
  margin: 15px;
  padding: 10px;
  border: 3px solid #9735CF;
  box-shadow: 1px 3px 30px 1px #9100B2;
  text-transform: capitalize;
  text-shadow: 1px 1px #7551C9 ;
  font-family: Arial;
  height: 120px;
  text-align: right;
  font-style: oblique;
  background-image: url('background4.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;


}
h1{
  font-size: 0.7em;
}

#logo{
  width: 100px;
  position: absolute;
  left: 50px;
}
.container{
  border:2px #9735CF solid;
  box-shadow: 1px 3px 30px 1px #9100B2;
  position: relative;
  top: 2px;
  margin: 15px;
  padding: 10px;
  height: 700px;
  overflow: hidden;
  background-color: rgba(243, 220, 248);
  background-image: url('background4.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;


  
}
.wave{
  border: #9100B2 1px solid;
  color: white;
  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:#9100B2 1px solid;
  background-image:repeating-linear-gradient(	#CBA8D3, #D79DC8);
}
#easy{
  border:#9100B2 1px solid;
  background-image:repeating-linear-gradient(	#CBA8D3, #D79DC8);
}
#medium{
  border:#9100B2 1px solid;
  background-image:repeating-linear-gradient(	#CBA8D3, #D79DC8);
}
#hard{
  border:#9100B2 1px solid;
  background-image:repeating-linear-gradient(	#CBA8D3, #D79DC8);
}
   
.wave:hover{
  height:90%;
  top:1px;
  z-index:1;
}