$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;
   }
}

You are viewing proxied material from mercury.661.org. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.