* {
 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 */