@media only screen and (max-width: 750px) {
  #aboutButtons {
    width: 100%;
  }
  #leftPanel {
    width: 100%;
  }
  #rightPanel {
    width: 100%;
  }
}


body {
  font-size: 14pt;
}

* {
 box-sizing: border-box;
}


h1 {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}

button {
  background-color: #eff1f9;
  color: #0b102d;
  font-weight: bold;
  border: none;
  margin: 2px;
  cursor: pointer;
}

.clickable {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
}

.greyedOut {
  background: grey;
  color: #d3d3d3;
}



#aboutButtons {
  float: left;
  text-align: left;
  background-color: #eff1f9;
  color: black;
  height: 30px;
  width: 100%;
}

#middle {
    float: left;
    height: 500px;
    width: 100%;
}

#leftPanel {
  float: left;
  height: 100%;
  width: 60%;
  background-color: blue;
}

#rightPanel {
  float: left;
  height: 100%;
  width: 40%;
  background-color: #66583B;
  color: #e0e0ad;
}

#map {
}

#inventory {
    float: left;
    height: 100px;
    width: 100%;
    background-color: red;
}