@font-face{
  font-family:"space-age-regular";
  src:url("space-age.spaceage.otf") format("woff"),
  url("space-age.spaceage.otf") format("opentype"),
  url("space-age.regular.ttf") format("truetype");
}
html {
  --deck-floor-colour: #7a77d0;
  --hall-floor-colour: red;
  --cupboard-back-colour: #2c1512;
  --cupboard-front-colour: #69342b;
}
* {  
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;       /* Opera */
  user-select: none;          /* Likely future */
  box-sizing: border-box;
}
body {
  background: #0c161d;
  color: #88776a;
  font-family: courier new;
  font-size: 24px;
  overflow:hidden;
  scrollbar-width: none;
  cursor: crosshair;
}
body::-webkit-scrollbar {
  display: none;
}
span {
  display: inline-block;
}
#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  display: none;
}
#status {
	background-color: #fff;
	color: #000;
  height: 27px;
  font-size: 20px;
  font-family: "space-age-regular";
  box-shadow: none;
  border-radius: 0px;
}
#sentence {
  width: 960px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  color: white;
}
#controls {
  width: 960px;
  height: 138px;
  z-index: 1;
}
#controls span:hover, #itemlist div:hover {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
}
#controls div {
  float: left;
}
#arrows {
  width: 42px;
}
#arrows span {
  font-size: 45px;
  height: 67px;
  width: 40px;
  line-height: 72px;
  text-align: center;
  background-color: #2d2022;
  margin: 1px;
}
#items {
  width: 308px;
  height: 136px;
  background-color: #2d2022;;
  margin: 1px;
  overflow: hidden;
  position: relative;
}
#itemlist {
  position: absolute;
  left: 0px;
  padding: 5px 4px 2px 12px;
  /*transition: all 0.4s;*/
}
#itemlist div {
  width: 300px;
  line-height: 25px;
  font-family: "space-age-regular";
  font-size: 18px;
}
#commands {
  width: 608px;
  font-size: 17px;
  font-family: "space-age-regular";
}
#commands span {
  background-color: #2d2022;
  width: 150px;
  margin: 1px;
  height: 44px;
  text-align: center;
  line-height: 40px;
}
#wrap {
  background-color: #000;
  margin-top: auto;
  margin-bottom: auto;
  width: 960px;
  height: 627px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  overflow: hidden;
}
#screen_wrap {
  position: relative;
  z-index: -5;
}
#screen {
  position: relative;
  height: 430px;
  z-index: -2;
  width: 1920px;
  filter: saturate(0.5);
}
#screen * {
  position: absolute;
}
.dark #screen {
  filter: brightness(0.2);
}

.wall {
  top: 50px;
  width: 1920px;
  height: 209px;
  z-index: 5;
  background-color: #6b6f6c;
}

#ceiling {
  height: 90px;
  width: 2500px;
  z-index: 1;
  background-image: linear-gradient(rgba(255, 255, 255, .1) 50%, transparent 50%, transparent);
  top: 0px;
  left: -300px;
  background-size: 90px 2px;
  background-color: #063842;
  transform: perspective(55px) rotateX(-50deg);
}

.sign * {
  pointer-events: auto;
}
.sign {
  pointer-events: none;
  display:flex;
  justify-content: center;
  z-index: 6;
  font-size: 114px;
  width: 286px;
  height: 90px;
  color: #007eff26;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  font-weight: bold;
  font-family: "Verdana";
  top: 109px;
  line-height: 81px;
  overflow: hidden;
  /* Hack required for Webkit. Firefox doesn't need this. */
  transform: rotate3d(0, 0, 0, 0deg);
}
.level {
  position: static !important;
}
.direction {
  position: static !important;
}
.left.sign {
  left: 35px;
}
.right.sign {
  right: 42px;
}
.deck .sign {
  display: none;
}

.light {
  top: 18px;
  left: 140px;
}
.light:before {
  content: "";
  position: absolute;
  height: 15px;
  width: 80px;
  border-radius: 50%;
  background: lightgray;
  transform: translateX(-50%);
  z-index: 7;
  border: 2px solid dimgray;
  border-bottom: none;
  border-top: 3px solid #222;
  box-shadow: 0 0 1vh 0.5vh #c0e0fc, 0 0 2vh 1vh #c0e0fc, 0 0 5vh 1vh #90c8f9, 0 0 10vh 1vh #77bcf8, 0 0 15vh 1vh #5FB0F7, 0 0 20vh 1vh #5FB0F7, 0 0 25vh 1vh #5FB0F7, 0 0 50vh 1vh #5FB0F7;
}
.light:after {
  content: "";
  position: absolute;
  transition: all 0.4s;
  height: 170px;
  width: 80px;
  top: 7px;
  left: 50%;
  transform: translateX(-50%) perspective(400px) rotateX(73deg);
  transform-origin: top center;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));
  z-index: 6;
}
.first.light {
  left: 245px;
}
.second.light {
  left: 708px;
}
.third.light {
  left: 1205px;
}
.fourth.light {
  left: 1668px;
}
.room5 .light:not(.first):not(.fourth),
.room21 .light:not(.first):not(.fourth),
.room37 .light:not(.first):not(.fourth),
.room45 .light:not(.first):not(.fourth),
.room46 .light:not(.first):not(.fourth),
.room47 .light:not(.first):not(.fourth),
.room48 .light:not(.first):not(.fourth) {
  display: none;
}
.dark .light:after {
  display: none;
}
.dark .light:before {
  box-shadow: none;
}

.floor {
  bottom: 90px;
  height: 81px;
  width: 1920px;
  background-color: var(--hall-floor-colour);
}
.deck .floor {
  background-color: var(--deck-floor-colour);
}
.lower.floor {
  height: 60px;
  bottom: 0px;
  background-color: rgb(97, 22, 22);
  pointer-events: none;
}
.hallway .lower.floor {
  background-color: rgb(20, 10, 10);
}
.hallway.level1 .lower.floor {
  display: none;
}
#lower_wall {
  width: 1920px;
  height: 30px;
  background-color:rgb(43, 21, 21);
  bottom: 60px;
}
.hallway #lower_left_wall {
  width: 85px;
  bottom: 0px;
  height: 90px;
  left: 49px;
  background-color: rgb(43, 21, 21);
  transform: skew(-48deg);
  z-index: 11;
}
.hallway #lower_right_wall {
  width: 85px;
  bottom: 0px;
  height: 90px;
  right: 49px;
  background-color:rgb(43, 21, 21);
  /* Small hack required for Chrome. Not required in Firefox. */
  transform: skew(48deg) rotate3d(0, 0, 0, 0deg);
  z-index: 11;
}

.right.door {
  z-index: 6;
  width: 185px;
  height: 162px;
  bottom: 171px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 80%, var(--hall-floor-colour) 100%);
  left: 1365px;
  border-radius: 30% 30% 0% 0%;
  box-shadow: 
    hsla(0,0%, 0%,.35) 6px 0px 4px -1px,
    hsla(0,0%, 0%,.35) -6px 0px 4px -1px,
    hsla(0,0%, 0%,.35) 0 -5px 4px -1px; 
}
.right.door:before,
.right.door:after{
  transform: rotate3d(0, 0, 0, 0deg);
  content: "";
  width: 50%;
  height: 162px;
  left: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 1000ms;
  background-size: 150px;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}
.right.door:before {
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) -2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 1px -8px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) -5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
.right.door:after {
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) 2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 0px 0px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) 5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
.right.door.open:before{
  left: -100px;
}
.right.door.open:after{
  left: 100px;
}
.deck .right.door {
  display: none;
}

.left.door {
  z-index: 6;
  width: 185px;
  height: 162px;
  bottom: 171px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 80%, var(--hall-floor-colour) 100%);
  left: 370px;
  border-radius: 30% 30% 0% 0%;
  box-shadow: 
    hsla(0,0%, 0%,.35) 6px 0px 4px -1px,
    hsla(0,0%, 0%,.35) -6px 0px 4px -1px,
    hsla(0,0%, 0%,.35) 0 -5px 4px -1px; 
}
.left.door:before,
.left.door:after{
  content: "";
  width: 50%;
  height: 162px;
  left: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 1000ms;
  background-size: 150px;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}
.left.door:before {
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) -2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 1px -8px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) -5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
.left.door:after {
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) 2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 0px 0px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) 5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
.left.door.open:before{
  left: -100px;
}
.left.door.open:after{
  left: 100px;
}
.deck .left.door {
  display: none;
}

#lower_left_door, #lower_right_door {
  bottom: 60px;
  border-bottom: 31px solid var(--deck-floor-colour);
  height: 0;
  width: 190px;
  z-index: 5;
}
#lower_left_door {
  left: 357px;
  transform: skew(-16deg);
  border-left: 8px solid transparent;
}
#lower_right_door {
  right: 350px;
  transform: skew(16deg);
  border-right: 8px solid transparent;
}
.hallway #lower_left_door, .hallway #lower_right_door {
  display: none;
}

#control_panel {
  /* Hack required for Webkit. Firefox doesn't need this. */
  transform: rotate3d(0, 0, 0, 0deg);
  width: 80px;
  height: 50px;
  left: 930px;
  top: 100px;
  border-style: outset;
  border-width: 4px;
  z-index: 8;
  padding: 5px;
  background-color: #050594;
  display: none;
}
#button {
  transform: rotate3d(0, 0, 0, 0deg);
  width: 24px;
  height: 20px;
  background-color: white;
  left: 959px;
  top: 115px;
  z-index: 9;
  display: none;
}
.room27 #button, .room27 #control_panel, .room35 #button, .room35 #control_panel {
  display: block;
}

/* ELEVATOR */
.deck #elevator_sign, .hallway.side0 #elevator_sign, .hallway.side2 #elevator_sign, .hallway.side3 #elevator_sign {
  display: none;
}
#elevator_sign {
  width: 60px;
  height: 25px;
  left: 930px;
  top: 62px;
  z-index: 7;
  font-size: 21px;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  text-align: center;
  transform: rotate3d(0, 0, 0, 0deg);
  color: #007eff26;
  font-weight: bold;
  font-family: "Verdana";
}
#elevator * {
  pointer-events: none;
}
#elevator {
  z-index: 6;
  width: 185px;
  height: 162px;
  bottom: 171px;
  left: 867px;
  overflow: hidden;
  box-shadow: 
    hsla(0,0%, 0%,.35) 6px 0px 4px -1px, 
    hsla(0,0%, 0%,.35) -6px 0px 4px -1px, 
    hsla(0,0%, 0%,.35) 0 -5px 4px -1px;
}
#elevator .interior {
  font-size: 100px;
  perspective: 200px;
  width: 100%;
  height: 100%;
}
#elevator .interior .side-left {
  position: absolute;
  left: 0;
  width: 1em;
  height: 100%;
  background: #ccc;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}
#elevator .interior .side-back {
  position: absolute;
  left: 0.01em;
  width: 2.5em;
  height: 100%;
  background: #666;
  transform-origin: 0 50%;
  transform: translateZ(-1em);
}
#elevator .interior .side-right {
  position: absolute;
  right: 0;
  width: 1em;
  height: 100%;
  background: #ccc;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}
#elevator .interior .side-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  background: #aaa;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}
#elevator .interior .side-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1em;
  background: var(--hall-floor-colour);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
#elevator .interior .side-left:after {
  content: "";
  width: 100%;
  height: 20px;
  background: #fff;
  position: absolute;
  bottom: 45px;
}
#elevator .interior .side-back:after {
  content: "";
  width: 100%;
  height: 20px;
  background: #ddd;
  position: absolute;
  bottom: 45px;
}
#elevator .interior .side-right:after {
  content: "";
  width: 100%;
  height: 20px;
  background: #fff;
  position: absolute;
  bottom: 45px;
}
#elevator:before,
#elevator:after{
  content: "";
  position: absolute;
  z-index: 7;
  width: 50%;
  height: 162px;
  display: inline-block;
  box-sizing: border-box;
  transition: 1000ms;
  background-size: 150px;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}
#elevator:before {
  transform: rotate3d(0, 0, 0, 0deg);
  left: 0px;
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) -2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 1px -8px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) -5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
#elevator:after {
  transform: rotate3d(0, 0, 0, 0deg);
  right: 0px;
  box-shadow: 
    inset hsla(0,0%,15%,  1) 0  -2px 0px 0px, /* border */
    inset hsla(0,0%,15%,  1) 2px 0px 0px 0px, /* border */
    inset hsla(0,0%,0%, .05) 0px 0px 0px 0px, /* soft SD */
    inset hsla(0,0%,0%, .25) 5px -4px 0px 0px, /* soft SD */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
}
#elevator.open:before{
  left: -100px;
}
#elevator.open:after{
  right: -100px;
}
.deck #elevator, .hallway.side0 #elevator, .hallway.side2 #elevator, .hallway.side3 #elevator {
  display: none;
}

/* WINDOWS */
.deck.level6 .wall, .deck.level5.side1 .wall, .deck.level3.side1 .wall, .deck.level1.side1 .wall {
  clip-path: polygon( 
    0 0, 1920px 0, 1920px 209px, 0 209px, 
    0 0, 
    30px 30px, 30px 150px, 270px 150px, 270px 30px, 
    400px 30px, 400px 150px, 640px 150px, 640px 30px, 
    770px 30px, 770px 182px, 1150px 182px, 1150px 30px,
    1280px 30px, 1280px 150px, 1520px 150px, 1520px 30px,
    1650px 30px, 1650px 150px, 1890px 150px, 1890px 30px,
    30px 30px, 0 0 );  
}
.window {
  z-index: 5;
  width: 240px;
  height: 120px;
  left: 30px;
  top: 80px;
  box-shadow: hsla(0,0%,15%, 1) 0 1px 0px 5px, /* border */
    hsla(0,0%,15%, .8) 0 -1px 5px 10px, /* soft SD */
    hsla(0,0%,0%, .25) 0 -1px 0px 9px, /* bottom SD */
    hsla(0,0%,100%,.7) 0 -1px 1px 13px, /* top HL */
    hsla(0,0%, 0%,.15) 0 -6px 6px 11px;
  /* Hack required for Webkit. Firefox doesn't need this. */
  transform: rotate3d(0, 0, 0, 0deg);
}
.first.window {
  left: 30px;
}
.second.window {
  left: 400px;
}
.third.window {
  left: 770px;
  width: 380px;
  height: 152px;
}
.fourth.window {
  left: 1280px;
}
.fifth.window {
  left: 1650px;
}

/* Hide windows for certain rooms */
.level1.side0 .window,
.level1.side2 .window,
.level1.side3 .window,
.level2 .window,
.level3.side0 .window,
.level3.side2 .window,
.level3.side3 .window, 
.level4 .window,
.level5.side0 .window,
.level5.side2 .window,
.level5.side3 .window,
.hallway .window {
  display: none;
}

.hallway .left.corridor {
  left: 0px;
  width: 0;
  height: 0;
  top: 339px;
  border-top: 90px solid var(--hall-floor-colour);
  border-right: 100px solid transparent;
}
.hallway .right.corridor {
  left: 1820px;
  width: 0;
  height: 0;
  top: 339px;
  border-top: 90px solid var(--hall-floor-colour);
  border-left: 100px solid transparent;
  /* Small hack required for Chrome. Not required in Firefox. */
  transform: rotate3d(0, 0, 0, 0deg);
}
.corridor {
  width: 100px;
  height: 255px;
  top: 0px;
  z-index: 10;
}
#sides {
	top: 0px;
	left: -50px;
	height: 430px;
  width: 1060px;
	border-top-right-radius: 60px;
	border-top-left-radius: 60px;
	z-index: 720;
  pointer-events: none;
  box-shadow: #000 -100px 0 0px 40px inset, #000 100px 0 0px 40px inset;
}
.outside #sides {
  display: none;
}
.bubble {
  font-size: smaller;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: bold;
  padding: 15px;
  color: black;
  background: white;
  border-radius: 20px;
  bottom: 170px;
  border: 2px solid black;
  box-shadow: 6px 3px black;
}
.speech:before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: -29px;
  left: 9px;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  background-color: white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  box-shadow: 5px 1px black;
}
.sprite {
  /* Hack for Chrome, so that doors are not drawn on top of other sprites. */
  transform: rotateY(0deg);
}
.actor:after, .ghost:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0px;
  width: 50px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  opacity: 0.5;
}
#light_beam {
  content: "";
  position: absolute;
  transition: all 0.4s;
  transform: translateX(-50%) perspective(400px) rotateX(45deg);
  transform-origin: top center;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.2));
}
#msg {
  z-index: 1500;
  height: 33px;
  font-size: 50px;
  margin-top: -25px;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  animation: blinker 1.5s linear infinite;
  color: white;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.metal, .wall, #commands span, #arrows span {
  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  background-color: hsl(0,0%,90%);
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px; /* outer SD */
  background-size: 150px;
  border-radius: .5em;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
/* NICE GOLD BUTTON *//*
    background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), linear-gradient(180deg, hsl(43, 57%, 63%) 0%, hsl(44, 31%, 49%) 47%, hsl(49, 57%, 76%) 53%, hsl(0,0%,70%)100%);
*/
}

#space {
  position: fixed;
  top: 27px;
  left: 0px;
  height: 430px;
  width: 960px;
  z-index: -3;
  overflow: hidden;
}
#planet {
  width: 400px;
  height: 400px;
  position: relative;
  margin: auto;
  transform:  scale3d(2, 2, 1) rotateZ(-15deg) translate(105px, 25px);
}
.rings {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(24,19,25,0) 0%,rgba(53,52,51,0) 34%,rgba(55,54,52,1) 36%,rgba(56,55,53,1) 37%,rgba(68,67,66,1) 38%,rgba(56,55,53,1) 39%,rgba(68,67,66,1) 40%,rgba(56,55,53,1) 41%,rgba(87,77,76,1) 42%,rgba(87,77,76,1) 44%,rgba(113,110,103,1) 46%,rgba(113,110,103,1) 48%,rgb(14, 117, 98) 49%,rgba(113,98,93,1) 51%,rgb(37, 118, 191) 52%,rgb(32, 149, 160) 53%,rgb(22, 132, 28) 54%,rgb(174, 215, 236) 55%,rgb(46, 76, 128) 56%,rgb(185, 212, 214) 58%,rgba(79,76,76,0) 60%,rgba(65,64,70,1) 61%,rgba(65,64,70,1) 62%,rgb(170, 192, 202) 63%,rgba(78,74,73,1) 65%,rgba(78,73,74,1) 67%,rgba(78,73,74,0) 68%,rgb(22, 169, 145) 69%,rgba(78,73,75,1) 70%,rgba(78,73,76,0) 71%,rgba(77,72,76,0) 72%,rgba(24,19,25,0) 100%);
  transform: rotateX(75deg);
}
.planet {
  background: green;
  width: 180px;
  height: 180px;
  position: absolute;
  top: 110px;
  left: 110px;
  border-radius: 50%;
}
.top {
  clip: rect(0px, 180px, 92px, 0px);
}
.bottom {
  clip: rect(90px, 180px, 180px, 0px);
}
.planet-bg {
  background: radial-gradient(
      circle at top,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,1) 100%), 
     radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,1) 100%), 
     linear-gradient(#99E8EC, #19BDBA, #99E8EC, #19BDBA, #99E8EC);
}
.side2 #planet, .side3 #planet, .side4 #planet, .hallway #planet {
  display: none;
}

#mist {
  height: 0px;
  width: 1920px;
  z-index: 700;
  top: 245px;
  box-shadow: rgba(148, 144, 13, 0.9) 0px 0px 40px 72px;
  animation: mist_animate 0.82s alternate-reverse infinite;
  display: none;
}
@keyframes mist_animate {
  0% {
    top: 245px;
  }
  100% {
    top: 247px;
  }
}

#screen .actor.death {
  position: relative;
  transform-origin: bottom;
  transform: rotate(-90deg) rotateY(0deg) translate(20px, 0px);
  transition: transform 0.5s ease 0s;
}
#screen .actor.death:after {
  position: absolute;
  transform: rotate(90deg) scaleX(3) translate(-25px, 13px);
  height: 20px;
  transition: transform 0.5s ease 0s, height 0.5s ease 0s;
}

#elevator_panel {
  width: 252px;
  border: 6px outset rgba(255,255,255,0.2);
  height: 250px;
  position: absolute;
  left: 356px;
  top: 117px;
  z-index: 1001;
  display: none;
  box-shadow: none;
}
#elevator_panel button {
  display: inline-block;
  cursor: pointer;
  border: none; 
  outline: 0;
  border-radius: 50%;
  width: 60px; 
  height: 60px;
  margin: 10px 30px;
  font-size: 20px;
  font-family: space-age-regular;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  color: #444;
  background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
  box-shadow: 
    -1px -2px 2px #c4bca3,
    inset 1px 2px 3px #eeeeee,
    inset -1px -2px 3px #c4bca3,
    2px 6px 16px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
#elevator_panel button:active, #elevator_panel button.activated {
  color: #4565c3;
  box-shadow: 
    -1px -2px 2px #c4bca3,
    inset 1px 2px 3px #eeeeee,
    inset -1px -2px 3px #c4bca3,
    1px 2px 12px rgba(0,0,0,0.5);
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate(0, 0);
}
@keyframes shake {
  10%, 90% {
    transform: translate(-1px, 0);
  }
  
  20%, 80% {
    transform: translate(2px, 0);
  }

  30%, 50%, 70% {
    transform: translate(-4px, 0);
  }

  40%, 60% {
    transform: translate(4px, 0);
  }
}

.pod {
  border: 8px solid #333333;
  box-shadow: inset blue 0px 0px 17px 3px;
  border-radius: 18px;
  width: 65px !important;
  border-style: outset;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%);
}
.pod:after {
  left: -9px;
  width: 67px;
  bottom: -11px;
}
.pod:before {
  content: "";
  position: absolute;
  height: 135px;
  width: 50px;
  background: rgb(140, 253, 201);
  opacity: 0.3;
  border-radius: 18px;
  left: -5px;
  top: -5px;
  box-shadow: inset 0 0 5px #000;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-style: outset;
  border-width: 5px;
  transform-origin: left;
  transform: rotateY(0deg);
  transition: transform 1.0s;
  transform-style: preserve-3d;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 45%, transparent 100%);
}
.open.pod:before {
  transform: rotateY(180deg);
}

.cupboard {
  transform: rotate3d(0, 0, 0, 0deg);
  border-style: outset;
  border-width: 4px;
  perspective: 500px;
  background-image: linear-gradient( 
    to bottom, 
    var(--cupboard-front-colour), 
    var(--cupboard-front-colour) 5%, 
    var(--cupboard-back-colour) 5%,
    var(--cupboard-back-colour) 45%,
    var(--cupboard-front-colour) 45%, 
    var(--cupboard-front-colour) 55%, 
    var(--cupboard-back-colour) 55%,
    var(--cupboard-back-colour) 95%, 
    var(--cupboard-front-colour) 95% );
  box-shadow: 
    inset 5px 0 0px 0px #69342b, 
    inset -5px 0 0px 0px #69342b;
}
.cupboard:before,
.cupboard:after{
  transform: rotate3d(0, 0, 0, 0deg);
  content: "";
  width: 50%;
  height: 72px;
  left: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 1000ms;
  transform-style: preserve-3d;
  background-size: 150px;
  background-image: 
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}
.cupboard:before {
  transform-origin: left;
  border-style: outset;
  border-width: 1px;
}
.cupboard:after {
  transform-origin: right;
  border-style: outset;
  border-width: 1px;
}
.cupboard.open:before {
  transform: rotateY(-170deg);
  box-shadow: none;
}
.cupboard.open:after {
  transform: rotateY(170deg);
  box-shadow: none;
}
.cupboard.open ~ #breathing_mask {
  z-index: 401;
  filter: brightness(1.0);
  opacity: 1;
}
#breathing_mask {
  z-index: 399;
  transition: z-index 1000ms, filter 1000ms, opacity 1000ms;
  filter: brightness(0.0);
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0;
}
#breathing_mask:before {
  content: '\1f93f';
  font-size: 26px;
  position: absolute;
  bottom: -2px;
}

#me .wearing {
  display: none;
}
#me.mask .wearing {
  display: inline-block;
  position: relative;
}
#me.mask .wearing:before {
  content: '\1f93f';
  font-size: 34px;
  position: absolute;
  top: -13px;
  width: 47px;
}
#me.mask.facing4 .wearing:before {
  left: 3px;
}
#me.mask.facing1 .wearing:before {
  left: -15px;
  clip: rect(0px, 47px, 47px, 18px);
}
#me.mask.facing2 .wearing:before {
  left: 21px;
  clip: rect(0px, 26px, 47px, 0px);
}
#me.mask.facing3 .wearing:before {
  display: none;
}

.green, .green.key::before, .green.key::after  {
  background-color: #146b07
}
.black, .black.key::before, .black.key::after {
  background-color: black;
}
.key::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: -2px;
  left: -4px;
  border-radius: 4px;
}
.key::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 6px;
  height: 5px;
  top: 0px;
  left: 17px;
}