body{

	background-color: #000000;
}
.wrapper{


	display: flex;
	flex-direction: row;
}
#myCanvas{

	background-color: #40a4df;
	background-image: url('../images/heather-wiggins-underwater-smaller.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.score{

	color: white;
	font-size: 12px;
}
.instructions_wrapper{

	margin-left: 10px;


}
.button_wrapper{



	width: 160px;
	margin-left: 10px;
}
h1{

	font-size: 45px;
	margin-top: 0px;
	font-family: 'Cinzel', serif;
	color: #ffffff;
	background-image: url(../images/paint_header.png);
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 15px;

}
h3{

	font-family: 'Cinzel', serif;
	color: #ffffff;
}
.btn {
  background: #7a7077;
  background-image: -webkit-linear-gradient(top, #7a7077, #7a7077);
  background-image: -moz-linear-gradient(top, #7a7077, #7a7077);
  background-image: -ms-linear-gradient(top, #7a7077, #7a7077);
  background-image: -o-linear-gradient(top, #7a7077, #7a7077);
  background-image: linear-gradient(to bottom, #7a7077, #7a7077);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  -webkit-box-shadow: -1px -1px 3px #666666;
  -moz-box-shadow: -1px -1px 3px #666666;
  box-shadow: -1px -1px 3px #666666;
  font-family: Arial;
  color: #a92929;
  font-size: 21px;
  padding: 10px 20px 10px 20px;
  border: solid #807b7e 2px;
  text-decoration: none;
  margin-top: 20px;
  width: 150px;

}

.btn:hover {
  background: #bfb8bd;
  background-image: -webkit-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -moz-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -ms-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -o-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: linear-gradient(to bottom, #bfb8bd, #bfb8bd);
  text-decoration: none;
  
}
.btn:focus{

	outline:none;
}
li{

	font-size: 25px;
	font-family: 'Cinzel', serif;
	color: #ffffff;
}
#keys{

	width: 200px;
	height: 200px;

}
#button{
  background: #7a7077;
  background-image: -webkit-linear-gradient(top, #7a7077, #7a7077);
  background-image: -moz-linear-gradient(top, #7a7077, #7a7077);
  background-image: -ms-linear-gradient(top, #7a7077, #7a7077);
  background-image: -o-linear-gradient(top, #7a7077, #7a7077);
  background-image: linear-gradient(to bottom, #7a7077, #7a7077);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  -webkit-box-shadow: -1px -1px 3px #666666;
  -moz-box-shadow: -1px -1px 3px #666666;
  box-shadow: -1px -1px 3px #666666;
  font-family: Arial;
  color: #a92929;
  font-size: 21px;
  padding: 10px 20px 10px 20px;
  border: solid #807b7e 2px;
  text-decoration: none;
  margin-top: 20px;
  width: 150px;


}
#button:hover{
  background: #bfb8bd;
  background-image: -webkit-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -moz-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -ms-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: -o-linear-gradient(top, #bfb8bd, #bfb8bd);
  background-image: linear-gradient(to bottom, #bfb8bd, #bfb8bd);
  text-decoration: none;

}
#button:focus{

  outline:none;
}