$font-stack-default: 'Inconsolata', monospace;
$font-stack-heading: 'Lexend Zetta', sans-serif;
$main-background-image: url(images/Metal_Blur.png);
$header-background-image: url(images/cyberBlur.png);
$main-border-image: url(images/cyberBlur.png);
$map-border-image: url(images/Cyber_Blur_Light.png);
$main-background-color: #b9bdbd;

$authority: #ABABAB;
$moon: #FEFEFE;
$mourning: #2C006F;

$disabledButtonText: #58525c;

* {
    box-sizing: border-box;
}

body {
    font-size: 16pt;
}

div {
    font-family: $font-stack-default;
}

p {
    font-family: $font-stack-default;
}

button {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    font-size: 16pt;
    font-family: $font-stack-default;
}


h1 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    font-family: $font-stack-heading;
}

.walkthrough h1 {
    font-size: 20px;
    text-align: left;
    color: $mourning
}

.walkthrough h2 {
  font-size: 18px;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
    font-family: $font-stack-heading;  
    color: $mourning
}

.walkthrough h3 {
  font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    font-family: $font-stack-heading;  
    color: black;
}

.walkthrough {
 background-color: $moon;
    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: $main-background-image;
    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: $main-border-image 50 round;
    background-image: $header-background-image;
    
}

.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: $disabledButtonText;
    text-decoration: none;
}

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

.closeBookendButton {
    width: 80px;
    height: 60px;
    background-image: $main-border-image;
    color: $moon;
}

.closeBookendButton:hover {
    background-image: $map-border-image;
    text-decoration: underline;
}

#openBookendMessage {
   width: 80px;
    height: 60px;
    background-image: $main-border-image;
    color: $moon; 
}

#openBookendMessage :hover {
   background-image: $map-border-image;
    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: $main-border-image 50 round;
}

#story {
    height: 70%;
    width: 100%;
    //background-color: #00A8FF;
    background-color: $main-background-color;
    border-left: 2px solid;
    border-image: $main-border-image 50 round;
   // background-image: $main-background-image;
}

#roomName {
    border-top: 2px solid;
    border-image: $main-border-image 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: $map-border-image;
    color: #FEFEFE;
    text-align: center;
    
}

.hintMessageUnseen {
    height: 90px;
}

.hintMessageSeen {
    height: 70px;
}

#actions {
    height: 30%;
    width: 100%;
    border-left-width: 2px;
    border-left-style: dashed;
    //border-left-color: #00A8FF;
    background-color: #FEFEFE;
    border-image: $main-border-image 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: $main-border-image 50 round;
}

.mapTable {
    position: relative;

}

.hidden {
    visibility: hidden;
}

.joy {
    background-color: #D756AD;
}

.authority {
    background-color: $authority;
}

.energy {
    background-color: #FEF06D;
}

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

.mourning {
    background-color: $mourning;
}

.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: $moon;
}

.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: $map-border-image 50;
    padding: 0px;
    height: 30px;
    width: 30px;
}

.playerLocation {
    border: 3px solid #00A8FF;
    border-image: $main-border-image 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%;
    //border: 1px solid white;
    //border-image: url(images/Metal_Blur.png) 50 round;
}

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

.inactive {
    background-color: $main-background-color;
    //background-image: $main-background-image;
    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: $main-border-image 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;
    }
}