body {
  background-color: black;
  font-family: "Noto Sans KR", sans-serif;
}
div#stage {
  background-color: rgb(74, 180, 74);
  width: 950px;
  height: 500px;
  margin: auto;
  position: relative;
  background-image: url(backgrounds/charBG.jpg);
  background-size: cover;
  overflow: hidden;
}

#blackout{
  width: 100%;
  height:100%;
  top:0;
  left:0;
  position: absolute;
  background-color: black;
  z-index: 999;
}

#title{
  font-size: 40px;
  position: absolute;
  font-weight: 900;
  top:50px;
  left:50%;
  transform: translate(-50%);
  text-transform: uppercase;
  text-align: center;

}

#startBtn {
  top:270px;
  left:350px;
  position:absolute;
  cursor: pointer;
  text-align: center;
  margin: auto;
  color: white;
  font-weight: bold;
  font-size: 22px;
  border: none;
  padding: 20px;
  width: 20%;
  background-color:  rgb(209, 63, 63);
  border-radius: 30px;
}

#startBtn:hover {
  background-color: rgb(226, 17, 17);
  -webkit-box-shadow: 0px 0px 42px -13px #000000; 
  box-shadow: 0px 0px 42px -13px #000000;
}

.hippoContainer{
  position: absolute;
  z-index: 100;
  /* width:80px; */
  bottom:20px;
  left:-200px;
}

#hippo{
  position: absolute;
  width: calc(571px/3);
  height:100px;
  background: url(hippoSprite2.png); 
}

.hippoRun{
  animation: animateRun .2s steps(3) infinite;
}


@keyframes animateRun {
  from{
    background-position: 0;
  }
  to{
    background-position: 571px;
  }
  
}



.soundButton{
  cursor: pointer;
  position: absolute;
  top:7px;
  left:7px;
  height:40px;
  width:40px;
  opacity: .8;
}

#soundoff{
  display: none;
}