styles.css

@import url(https://fonts.googleapis.com/css?family=Caveat+Brush);
html{
  font-size: 62.5%
}
body{
  font-size: 1.3rem;
}
#wrapper{
	position: relative;
	margin: 0 auto;
	font-family: 'Caveat Brush';
}
#game{
	background: url('./images/kitty_bg.jpg');
	display: block;
	position: absolute;
	z-index: 1;
}
#start,#game-over,#pause{
	background: none repeat scroll 0% 0% rgba(255,255,255, 0.8);
	position: absolute;
	z-index: 2;
	color: black;
}
#start{
	color:black;
	background: url('./images/kitty_start.jpg');
	background-size: cover;
  position: relative;
}
#start input {
  position: relative;
  top: 67%;
  color: white;
  font-size: 1.5rem;
  padding: 1.0rem;
  background: #47BE55;
  border: none;
}
#start p, #start ol{
	padding: 10px 40px;
}
.butt{
	padding: 11px 23px;
	text-decoration: none;
	color: black;
	font-size: 16px;
}
.butt-good{
	background: rgb(86, 209, 204);
	border: 1px solid rgb(4, 180, 173);
}
.butt-exit{
	background: rgb(238, 117, 117);
	border: 1px solid rgb(187, 58, 58);
}
.invisible{
	visibility: hidden !important;
	display: none;
}
.visible{
	visibility: visible !important;
}
.wrapper-hr{
	padding: 50px 76px 0px 90px;
}
.wrapper-xs{
	padding: 0 190px;
}
.rt-butt{
	right: 130px;
	position: absolute;
}
.lt-butt{
	position: absolute;
	left: 130px;
}
.txt-center{
	text-align: center;
}
.center-blk {
	margin: 0 auto;
	display: block;
}
.wd-100{
	width:100px;
}
p{
	font-size:16px;
}
.float-lt{
	float:left;
}
.float-rt{
	float:right;
}
#mute {
	z-index: 10;
	position: absolute;
	top: 1.0rem;
	right: 1.0rem;
}
#instructions {
	background: url('./images/kitty_carpet.jpg');
  height: 550px;
}
.instructions h1 {
  padding: 0px 0 30px 0;
	text-align: center;
}
.instructions {
	padding: 15px;
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
.instructions > div{
	text-align: left;
}
.instructions .row {
	padding-bottom: 30px;
  height: 13.9rem;
}