* {
  box-sizing: border-box;
}

body {
  font-size: 16pt;
}

div {
  font-family: "Inconsolata", monospace;
}

p {
  font-family: "Inconsolata", monospace;
}

button {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  font-size: 16pt;
  font-family: "Inconsolata", monospace;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  font-family: "Lexend Zetta", sans-serif;
}

.walkthrough h1 {
  font-size: 20px;
  text-align: left;
  color: #2C006F;
}

.walkthrough h2 {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  line-height: 30px;
  font-family: "Lexend Zetta", sans-serif;
  color: #2C006F;
}

.walkthrough h3 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  font-family: "Lexend Zetta", sans-serif;
  color: black;
}

.walkthrough {
  background-color: #FEFEFE;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
}

.vanished {
  display: none;
}

.revealOrHideHint:hover {
  text-decoration: underline;
}

.revealHint:hover {
  text-decoration: underline;
}

#bookendingMessage {
  z-index: 500;
  position: absolute;
  margin-top: 30px;
  margin-left: 0px;
  width: 700px;
  height: 600px;
  background-image: url(images/Metal_Blur.png);
  text-align: center;
}

.bookendingMessageText {
  margin-top: 100px;
}

.interactive {
  text-decoration: underline;
  cursor: pointer;
}

.invItem {
  text-decoration: underline;
  cursor: pointer;
}

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

#aboutButtons {
  float: left;
  text-align: center;
  background-color: #FEFEFE;
  color: black;
  min-height: 30px;
  width: 100%;
  max-width: 700px;
  border-left: 2px double #00A8FF;
  border-top: 2px double #00A8FF;
  border-right: 2px double #00A8FF;
  border-image: url(images/cyberBlur.png) 50 round;
  background-image: url(images/cyberBlur.png);
}

.frameButton {
  margin-left: 10px;
  margin-right: 10px;
  background: -webkit-linear-gradient(#D8D8D8, #fcfeff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
}

.frameButton:hover {
  background: -webkit-linear-gradient(#fcfeff, #D8D8D8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #D8D8D8;
}

.disabledButton {
  cursor: default;
  -webkit-text-fill-color: #58525c;
  text-decoration: none;
}

.disabledButton:hover {
  background: -webkit-linear-gradient(#D8D8D8, #fcfeff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #58525c;
  text-decoration: none;
}

.closeBookendButton {
  width: 80px;
  height: 60px;
  background-image: url(images/cyberBlur.png);
  color: #FEFEFE;
}

.closeBookendButton:hover {
  background-image: url(images/Cyber_Blur_Light.png);
  text-decoration: underline;
}

#openBookendMessage {
  width: 80px;
  height: 60px;
  background-image: url(images/cyberBlur.png);
  color: #FEFEFE;
}

#openBookendMessage :hover {
  background-image: url(images/Cyber_Blur_Light.png);
  text-decoration: underline;
}

#leftPanel {
  float: left;
  height: 500px;
  width: 40%;
  max-width: 300px;
  background-color: green;
}

#rightPanel {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  height: 500px;
  width: 60%;
  max-width: 400px;
  background-color: black;
  background-image: url(images/Map_Of_NightStarless.png);
  border-right: 2px double #00A8FF;
  border-left: 2px double #00A8FF;
  border-top: 2px solid;
  border-image: url(images/cyberBlur.png) 50 round;
}

#story {
  height: 70%;
  width: 100%;
  background-color: #b9bdbd;
  border-left: 2px solid;
  border-image: url(images/cyberBlur.png) 50 round;
}

#roomName {
  border-top: 2px solid;
  border-image: url(images/cyberBlur.png) 50 round;
  background-color: red;
}

#roomName h1 {
  margin: 0;
  padding: 5px;
}

.roomNameDarkBG h1 {
  background: -webkit-linear-gradient(#D8D8D8, #fcfeff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.roomNameLightBG h1 {
  background: -webkit-linear-gradient(black, #9a9fa1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hintMessage {
  position: absolute;
  z-index: 100;
  background-color: red;
  width: 400px;
  margin-left: 300px;
  margin-top: 0px;
  background-image: url(images/Cyber_Blur_Light.png);
  color: #FEFEFE;
  text-align: center;
}

.hintMessageUnseen {
  height: 90px;
}

.hintMessageSeen {
  height: 70px;
}

#actions {
  height: 30%;
  width: 100%;
  border-left-width: 2px;
  border-left-style: dashed;
  background-color: #FEFEFE;
  border-image: url(images/cyberBlur.png) 50 round;
}

#map {
  display: flex;
  height: 90%;
  width: 90%;
  justify-content: center;
  align-items: center;
}

#inventory {
  float: left;
  height: 100px;
  width: 100%;
  max-width: 700px;
  background-color: #FEFEFE;
  border: 2px dashed #00A8FF;
  border-image: url(images/cyberBlur.png) 50 round;
}

.mapTable {
  position: relative;
}

.hidden {
  visibility: hidden;
}

.joy {
  background-color: #D756AD;
}

.authority {
  background-color: #ABABAB;
}

.energy {
  background-color: #FEF06D;
}

.bodymind {
  background-color: #6455BC;
}

.mourning {
  background-color: #2C006F;
}

.sky {
  background-color: #C3FBFF;
}

.greenery {
  background-color: #029388;
}

.water {
  background-color: #52C4FE;
}

.blood {
  background-color: #A10000;
}

.void {
  background-color: black;
}

.summer {
  background-color: #009C04;
}

.moon {
  background-color: #FEFEFE;
}

.gap {
  border: none;
  height: 30px;
  width: 30px;
  padding: 0px;
}

.navLineV {
  position: relative;
  height: 30px;
  width: 30px;
  border-left: 1px solid #00A8FF;
  left: 15px;
  right: 15px;
}

.navLineH {
  position: relative;
  height: 30px;
  width: 30px;
  border-top: 1px solid #00A8FF;
  top: 15px;
  bottom: 15px;
}

.movementArrow {
  padding: 0px;
  height: 30px;
  width: 30px;
}

/*
.movementArrowNorth {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #00A8FF;
}

.movementArrowSouth {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #00A8FF;
}


.movementArrowEast {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #00A8FF;
    border-bottom: 10px solid transparent;
    background-color: transparent;

}

.movementArrowWest {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #00A8FF;
    border-bottom: 10px solid transparent;
}*/
.invItem {
  float: left;
  font-size: 14pt;
  margin-top: 1px;
  margin-bottom: 1px;
  height: 99%;
  width: 25%;
  max-width: 110px;
  background-color: #FEFEFE;
  color: #00A8FF;
  border: 2px dashed #00A8FF;
}

.invItemText {
  text-align: center;
  margin-top: 30%;
  margin-bottom: 70%;
  word-wrap: break-word;
}

table {
  table-layout: fixed;
  position: relative;
}

tr {
  padding: none;
  height: 30px;
  width: 30px;
}

td {
  border: 1px solid #00A8FF;
  border-image: url(images/Cyber_Blur_Light.png) 50;
  padding: 0px;
  height: 30px;
  width: 30px;
}

.playerLocation {
  border: 3px solid #00A8FF;
  border-image: url(images/cyberBlur.png) 50 round;
  padding: none;
}

.cellImg {
  height: 30px;
  width: 30px;
}

.lock {
  position: absolute;
  top: 10px;
  left: 80px;
  z-index: 10;
}

.actionButton {
  float: left;
  height: 100%;
  width: 50%;
}

.active {
  background-color: white;
  color: #00A8FF;
  pointer-events: none;
}

.inactive {
  background-color: #b9bdbd;
  color: white;
}

.actionButtonIcon {
  height: 50%;
}

.tutorial {
  color: #C3FBFF;
  font-weight: bold;
}

.tutorialImg {
  height: 30px;
  width: 30px;
}

.actionButtonText {
  height: 50%;
}

@media only screen and (max-width: 750px) {
  #bookendingMessage {
    width: 400px;
    height: 1150px;
    margin-top: 50px;
  }

  #aboutButtons {
    width: 100%;
    max-width: 400px;
  }

  #middle {
    height: 100%;
  }

  #leftPanel {
    width: 100%;
    max-width: 400px;
    border-right: 2px solid;
    border-image: url(images/cyberBlur.png) 50 round;
  }

  #rightPanel {
    width: 100%;
    max-height: 390px;
  }

  #inventory {
    width: 100%;
    max-width: 400px;
    height: 200px;
  }

  .invItem {
    height: 50%;
  }

  .hintMessage {
    position: absolute;
    z-index: 100;
    background-color: red;
    width: 400px;
    margin-left: 0px;
    margin-top: 0px;
    cursor: pointer;
  }

  .hintMessageUnseen {
    height: 100px;
  }

  .hintMessageSeen {
    height: 93px;
  }
}
@media only screen and (min-width: 800px) {
  #gameContainer {
    width: 800px;
  }
}

/*# sourceMappingURL=style.processed.css.map */