@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
td.exit {
  min-width: 3em;
}

#loginBox {
  width: 100%;
}
#roomBox {
  flex-basis: 60%;
  flex-grow: 1;
}
#itemBox {
  background-color: #f0f0f0;
}
#itemHide {
  float: right;
}
#player {
  flex-basis: 15em;
  flex-grow: 1;
}
#log {
  color: white;
  background-color: black;
  width: 100%;
  overflow: scroll;
  max-height: 40%;
}
.response {
  background-color: #222;
}
#inputBox {
  width: 100%;
}
#inputForm {
  display: flex;
  align-items: flex-start;
}
#input {
  flex-grow: 1;
}

h2 {
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
}
pre {
  margin: 0;
}

.black {
  color: black;
}
.red {
  color: red;
}
.green {
  color: green;
}
.brown {
  color: brown;
}
.blue {
  color: blue;
}
.magenta {
  color: magenta;
}
.cyan {
  color: cyan;
}
.white {
  color: white;
}
.bblack {
  background-color: black;
}
.bred {
  background-color: red;
}
.bgreen {
  background-color: green;
}
.bbrown {
  background-color: brown;
}
.bblue {
  background-color: blue;
}
.bmagenta {
  background-color: magenta;
}
.bcyan {
  background-color: cyan;
}
.bwhite {
  background-color: white;
}