html, body {
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 100%); 
  background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(20,20,20,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(20,20,20,1) 100%); ;
}
h1 {
  text-align: center;
  color: white;
}
#mute {
  position: absolute;
  top:20px;
  right:20px;
  color:white;
  z-index: 10000;
}
#github {
  position: absolute;
  top:20px;
  right:100px;
  color:white;
  z-index: 10000;
}
#credits {
  position: absolute;
  bottom:20px;
  right:20px;
  color:white;
  z-index: 10000; 
}
#mute:hover {
  background-color:rgba(255,255,255,0.2);
}
#cantplaymsg {
  position: absolute;
  z-index: 100001;
  display: none;
  width: 50%;
  height:50%;
  background-color: rgba(100,100,100,1);
  color:white;
  border-radius: 1em;
  font-size: 1.5em;
  left:25%;
  box-sizing:border-box;
  padding:1em;
  text-align: center;
}
#overlay {
  background-color: rgba(50,50,50,1);
  z-index: 1001;
  text-align: center;
  background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(50,50,50,1) 100%); 
  background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(50,50,50,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(50,50,50,1) 100%); ;
}
.line {
  width:100%;
  text-align: center;
  color: white;
}
#endScreen {
  background-color: rgba(50,50,50,1);
  border-top-right-radius: 1em;
  border-top-left-radius:1em;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius:1em;
  box-shadow:0em 0em 0.5em 0.2em rgba(255,255,255,0.5),0em 0em 5em 1em rgba(0,0,0,0.5);
}
#score {
  font-size:3em;
}
#playBut {
  margin-top:20%;
}
.button {
  border-radius:0.1em;
  width:30%;
  padding:0.5em;
  text-align: center;
  margin-top:10%;
  color: white;
  margin-left:35%;
  font-size: 2em;
  box-shadow: 0em 0em 0.2em 0.3em rgba(30,30,30,0.2);
  background: -moz-linear-gradient(top, rgba(50,50,50,1) 0%, rgba(30,30,30,1) 100%); 
  background: -webkit-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(30,30,30,1) 100%);
  background: linear-gradient(to bottom, rgba(50,50,50,1) 0%,rgba(30,30,30,1) 100%); 

  -webkit-transition: all 0.6s ease-out;
    -moz-transition:  all 0.6s ease-out;
    -o-transition:    all 0.6s ease-out;
    -ms-transition:   all 0.6s ease-out;
    transition:     all 0.6s ease-out;
}
.button:hover {
   background: -moz-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(50,50,50,1) 100%); 
  background: -webkit-linear-gradient(top, rgba(30,30,30,1) 0%,rgba(50,50,50,1) 100%);
  background: linear-gradient(to bottom, rgba(30,30,30,1) 0%,rgba(50,50,50,1) 100%); ;
}
#Canvas {
  position: absolute;
  top: 0;
  left: 0;
}
#scoreIng {
  position: absolute;
  font-size: 0.8em;
  top:10%;
  left: 5%;
  width:25%;
  height:15%;
}
#lives {
  position: absolute;
  top:10%;
  right: 5%;
  width:225px;
  height:15%;
}
.live {
  background-image: url('img/heart2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height:75px;
  width:75px;
  float: left;
}
.title {
  margin-top:15px;
  min-height:89px;
  width:256px;
  margin-left:calc(50% - 128px);
  background-image: url("img/logo.png");
  background-repeat:no-repeat;
  background-size: 100% auto;
}
.descr {
  font-size: 0.8em;
  color:rgba(200,200,200,1);
  padding:0.5em;
  
}
#Bg1 {

  /*background-color: rgba(50,50,50,0.3);*/
  height:25%;
  top:25%;
  width:100%;
  position: absolute;
  /*box-shadow:inset 0em 0.2em 0.2em 0em rgba(255,255,255,0.5);*/

}
.Say {
  background-color:rgba(55,55,55,1);
  border-bottom-left-radius:0.1em;
  font-size:0.7em;
  width:25%;
  padding:0em;
  line-height: 150%;
  float:right;
  z-index: 100;

}
.bgDiv {
  border-top:1px solid rgba(255,255,255,0.3);
  
  
  /*background: -moz-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(50,50,50,1) 100%); 
  background: -webkit-linear-gradient(top, rgba(30,30,30,1) 0%,rgba(50,50,50,1) 100%);
  background: linear-gradient(to bottom, rgba(30,30,30,1) 0%,rgba(50,50,50,1) 100%); */
  /*box-shadow: -2em 0.2em 3em -1em rgba(255,0,0,0.5);*/
}
#BgDiv1 {
  color:white;
text-align: center;
  line-height:250%;
  font-size: 2em;
  height:25%;
  top:25%;
  width:100%;
  position: absolute;
}
#Bg2 {

  /*background-color: rgba(50,50,50,0.5);*/
  height:25%;
  top:50%;
  width:100%;
  position: absolute;
  /*box-shadow:inset 0em 0.2em 0.2em 0em rgba(255,255,255,0.5);*/

}
#BgDiv2 {
  color:white;
text-align: center;
  line-height:250%;
  font-size: 2em;
  height:25%;
  top:50%;
  width:100%;
  position: absolute;

  z-index: 100;
}
#Bg3 {

  /*background-color: rgba(50,50,50,0.7);*/
  height:25%;
  top:75%;
  width:100%;
  position: absolute;
  /*box-shadow:inset 0em 0.2em 0.2em 0em rgba(255,255,255,0.5);*/

}
#BgDiv3 {
  color:white;
text-align: center;
  line-height:250%;
  font-size: 2em;
  height:25%;
  top:75%;
  width:100%;
  position: absolute;
  z-index: 100;
}