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