html, body {width:100%;height:100%;margin:0;padding: 0px;overflow:hidden}

#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 90%;
    cursor: none;
    position: relative;
    z-index: 444;

 }

 video {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
}

#board{
   position:relative;
   width:100%;
   height:10%;
   margin-left: 0% ;
   margin-top: 1.5% ;
}
#scoreDiv {
   position:absolute;
   width:15%;
   height:40%;
   left:0%;
   top:2%;
}
#scoreImg{
  height:100%;
  width:40%;
  float:left;
}
#scoreNumDiv{
  height:100%;
  width:57%;
  display: inline-block;
  float: right;
}
.scoreNum{
 height:100%;
 width:25%;
 float:left;
}
#growthDiv{
  position:absolute;
  width:30%;
  height:40%;
  display: inline-block;
  left:16%;
  top:2%;
}
#growthImg{
    height:100%;
    width:28%;
    float: left;
}
#growthBarTotal{
  height:100%;
  width:70%;
  display: inline-block;
  background-color:#333;
  border-radius: 5px ;
  float: right;
  position: relative;
}
#growthBarActual{
  height:100%;
  border-radius: 5px ;
  background-color:dodgerblue;
  display:inline-block;
  float: left;

}
#progressNotch1{
  height:100%;
  width:1px;
  background-color: SandyBrown;
  left: 33.33%;
  display: inline-block;
  position: absolute;
}

#progressNotch2{
  height:100%;
  width:1px;
  background-color: SandyBrown;
  left:66.66%;
  display: inline-block;
  position: absolute;
}

#levelDiv{
  position:absolute;
  width:15%;
  height:40%;
  display: inline-block;
  left:47%;
  top:2%;
}
#levelImg{
    height:100%;
    width:60%;
    float: left;
}
 #levelNum{
   height:100%;
   width:15%;
   float: right;
   margin-right:22%;
 }
 #liveDiv{
  position:absolute;
  width:10%;
  height:40%;
  right:30%;
  top:2%;
}
#charImg{
  height:100%;
  width:50%;
  float: left;

}
#liveNumDiv{
  height:100%;
  width:50%;
  display: inline-block;
  float: right;

}
.liveNum{
 height:100%;
 width:40%;
 float: left;
}
#menuDiv{
  position:absolute;
  width:30%;
  height:40%;
  left:16%;
  top:44%
}

#menuImg{
   height:100%;
   width:28%;
   float: left;
}
#menuCharDiv{
 height:100%;
 width:70%;
 display: inline-block;
 float: right;
}

.menuChar{
height:100%;
width:20%;
float:left;
margin-left: 6.666%;
margin-right: 6.666%;
}

#seaStar{
position:absolute;
top:0px;
display: none;
height:50px;
width:50px;
}

#seaStarDiv{
 position:absolute;
 width:10%;
 height:40%;
 display: inline-block;
 left:0%;
 top:45%;
}
#seaStarImg{
   height:100%;
   width:30%;
   float: left;
}
#seaStarNum{
  height:100%;
  width:20%;
  float: right;
  margin-right:46%;
}

#badgeDiv {
   position:absolute;
   width:29%;
   height:100%;
   right:0%;
   top:2%;

}
#badgeImg{
  height:100%;
  width:20%;
  float:left;
}
#playerBadgesDiv{
  height:100%;
  width:80%;
  display: inline-block;
  float: right;
}

.bad{
 height:100%;
 width:19%;
 margin-left: 1%;
 float:right;
 border: solid 0.5px SandyBrown;
}