html {
  height: 100%;
  padding:0;
  max-width:100%;
  box-sizing:border-box;
}
body {
  min-height:100%;
  margin: 0;
  box-sizing:border-box;
  border:1vh ridge #666;
  background-color: tan;
  padding:0;
  max-width:100%;
  background-image:url('../images/bg1.jpg');
  background-size:100% 100%;
}
select, button, input {
  font-size:1rem;
  margin: .1rem;
}
button, .btn, select {
  cursor: pointer;
}
#main {
  width:100%;
  padding: 1vh;
  text-align:center;
  box-sizing:border-box;
}
#right {
  min-width:10rem;
  width:20%;
  background-color: tan;
}
#left {
  flex-grow: 1;
}
#enterText {
  box-shadow: 0 0 .1rem .05rem black inset;
  display: block;
}
.bg2 {
  background-color: #fbffe5
}
#actionsDiv {
  padding-left: 1vw;
  border-bottom: 1vw ridge #877;
  text-align:center;
}
#top {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;

}
#sysChat {
  width:24rem;
  text-align:center;
  min-height:4.8rem;
  background: rgba(255,255,255,.9);
  border-radius: .5rem;
  margin: 0 auto;
  max-width: 98%;
  /*text-shadow: 1px 1px 1px black;*/
}
.chat_humor {
  color: yellow
}
.chat_injured_crit {
  color: red
}
.chat_sad {
  color: blue;
}
.chat_injure_crit {
  font-style: bold;
}
.chat_achievement {
  color: #8600ff;
}
.chat_dodge {
  font-style: italic;
  display: inline-block;
  /*transform: skew(10deg, 0deg);*/
  /*add spinny/flex anim?*/
}
.attackOptionIcon {
  width: 2.5rem;
  height:2.5rem;
  margin-right:.5rem;
  box-shadow: .2vh .2vh 1vh .05vh rgba(10,0,5,.5); box-sizing:border-box; border: .25vh ridge #677;
  cursor: pointer;
}
.attackOptionIcon:hover {
  box-shadow: .2vh .2vh 1.5vh .08vh rgba(5,0,95,.58);
}
.attackOptionIcon.disabled {
  box-shadow: .2vh .2vh 1vh .05vh rgba(10,0,5,.5), .2vh .2vh 5vh 1vh rgba(10,0,5,.5) inset;
  cursor: wait;
}
#chat {
  height:12rem;
  display:none;
  background-image: url(../images/paper.jpg);
  background-size:cover;
  max-width: 40rem;
  width: 98%;
  margin: 0 auto;
  border-radius: .25rem;
  padding: .2rem;
  max-height:9rem;
  overflow-y:auto;
  margin-bottom:1rem;
}
#chatInput {
  padding:.15rem;
  width:100%;
  top: 0;
  position:sticky;
  box-sizing:border-box;
  background-color:rgba(245,245,245,1)
}
.bagItem {
  width:1.8rem;
  height:1.8rem;
  box-shadow: 0 0 .15rem .05rem black;
  margin: 1vh;
  background-color: #DDD;
  background-size:100% 100%;
  display: inline-block;
  vertical-align: middle;
}
.bagOption {
  cursor: pointer;
  color: #1100fd;
}
.bagOption:hover {

}
.link {
  color: blue; cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}
.moveOpt {
  position:absolute;
  text-shadow:1px 1px 1px black;
  color: white;
  font-weight: bold;
}
.moveOpt:hover {

}
#heroStats > div{
  display: none;
}
#heroStats:hover > div {
  display:flex;
  position:absolute;
  z-index:1;
  background-color: rgba(255,255,255,.98)
  padding:.5rem;
  border-radius:.25rem;
  width:14rem;
  max-width:50vw;
  left:0;
  right:0;
}