:root {
  --pointer-cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAQAAAC4a5A9AAAB3ElEQVR4Ad3BXWiNYQDA8f/7nnMoSz5LaloRuXIncSHFDRfESq1RcqGUGzEXQj6SCyIfSSblYjVDsiiZkqKsXSkSNa2QGM1QW3vf5/lrTo7jMO79ftC42KNOGqABSPmLvkc6dFtagBJjW+TnYPgkT0mAhLFMefpao1mbNAMlEsaw6YIGs0E5R1lCkZRaK8fz7LVmeqqfhAlMoyzlN1uPadCeL7R2vrsROMBC5sKWEjXGLb4/pPlHzzjqhL2e/EAdmFKlCGy7pZl2ZoPR2BXN+tz0cutu6ChQUQTWbjfPNDeqA+pg3mu3zAFSykzhUNcdH+Ya/SHX4X7ZCRSpWHJaw0c1OiqqUbP3chAoUbH3sI5o9KegI32yDyhSsf+qZsFqQbN7sgEoUrH/uo4Eo1Wi7hqgHkipaFzu82CIRsuC5g/kPJDy08Y6LmK3Bo1+F6LNT5gBpFQksG4m1xi+q8EQVXNdc5P51EhhxWxaCi+vOKQxGjW+cL1sBgpUSQGmNHG56W2vxlx1uF3agCK/SMGkYyp7LmlufBWOyJtZq4GUGglFYOlZzXtEHjc0kvJHBWDRKlsyvtK+aimjEv4ggWWTaeX4vB0L6oGEhLEtm75rIgmQ8lcJZSn/lJDwv/sGEntjLZoH1NQAAAAASUVORK5CYII=),
    auto;
  --mouse-cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAADtklEQVR42q2VS0hUYRTHR5ssIgpxMjWdsXwbOqM1Bo0mET0IgzZqLa0WLQ1a2UbSdCmFGUqQuRCcfOSiRClkRMIUTTQX+X6X+X7MlDXd0/873bELN8rL9IfD/b5vLr97Xt8ZHRGNz87O7tFBWOt13mpjY+MLQO9hfv8Fury87JibmyOoG7bLa6jT6XxUW1tLz+x2gnq9hq6srNwcHBwkwX796pX30LW1tbSJiQnat3evhO1mS0uLd9CBgQEjquw6f+4cRUdGkhI6Nja2W4bu1MLUr66ufigoKBCwHydSUpTQd7D9mqHr6+vPa2pqBOh7XGwsWcxmsf7W0NBAkiStAGaWoX7bAm5ubt7r6OhgYHxcHAUFBlKSxcLQoqIicrvdXzRBl5aWro6PjwuAOzoqioIPHqQDAQFkPX6cP1Jw96426OjoqFlU+nB4OAUaDFJIcDAFARrg70/HkpO1Q+12+/7FxcWP169d48KYjEYOG6YdikMfuR+7SkpKOOyoiAiGaYYqG9flclU1NjZuVRogLVC9CoiQb/f09CgrrTIDoMlJSfxOcXExOSEiSpI5vh7gDnmMXZicnOSQIxEyKq0ComB0ND6ewg4dEu997ezsJGg2Pz9fv5U+bJjc398fAeDXVJuNdvr6SqEhISogiiVA0qWMDBoaGiLcsM91dXUPcQanfstHfvrNz88P5+bmcqXDTSYPiL01hYUxrKqqilBA1/Dw8Bvs78Cs7JlHyvjx4suKioqtBo+NiSFPCyEN/CGMO5qenn6N9UXcogAFRl1p5PF+c3MzJz3FamWPYOzdYZOJ91eyswlXdZmI/HVQa2ur/o9A2cMbfX19fIeFN6WlpZSTkyOgXAhzYiJ/zOFwEGRXFFV1U/hwZmbmJIpDp9LSSDyh9fb2dvYsMSGBQ4/6NTPdKAhBZxUOqW9LfX19IFrLBUmooiM9Pb0Ig+NjYWEh5y/yyBGRV16LKQSNKiY7GGr5YozZy8rKnmJ9GWZoa2t7MDIywpDY6GieQp7RhmlPUOG/BvAZWIJiH4NUfKiurmaouJbG0FBOg81mk1BIgizqfKrl43kB0/wWxhtD0JOSEVVPTU1lLxENQR1/C1sccl8qngb81TqamprYS/nqufPy8mju0yeCl10If3t/D5mZmexlVlbW5ampKacV/YmelHp7e7kf0QUv8PMNdmQ7Ury4A03/WORsYWHhO27LW9EFOD9dXl6+R6dBytCPdXd3t1VWVj7BOhsWpPqwFslJz4BZlB9Twn4CZMoUduvBz0gAAAAASUVORK5CYII=),
    auto;
  --select-cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAQAAAC4a5A9AAAB6klEQVR42u3TwUuTcRzH8fezZ0JEDg8LIvMwMw0SgjpURB4zOngb1KmiCLqGEKGFpPQHBIEHczvaDhF1CoqICoKyiEYQ2pxmWlNqbvq4Pc+e36fDTFdt6aFjn/OLL9/f58eX7NHsBQDZCZu/Zb5fWkwudAKoTlZNeLUz46Xlyr2daQF4VVdLbkm9fKOoOy1HywMvQqDA42BVeafb08kS3k3lVcgsnirP7Qv8KZtnZ54Jg8G9JyPvSaajvDGVGysATwdzaio1KCT8E+5blVSMfQgDaG2JqA1dHd/8uDARtQjh9fpzKi7ke36tzQLs5MMZUdoqFNZOIdy4CiqOZaNlDEDChhunHV3yUaMQatImYfa5jyQVHmR2QblfCwhPpUaFv0PIEgqqWYjSMe+9POUHIABINvPjI+0c0TT1CNiGA2DtDVpYZCI/Xx6EpVtTwmuQpUZtF8K/ppSW/Y/vLsc5vlrQXKujfmHaFFlBE3L8sWTvEOfYs/JTCoIb+yS8diH8K6YSKVBR+Oc2R9eFwT9jXqug8WRPJQpUzJsQxfNmVI5mJwdHOPsbKifXmvOHzXMV9CU9nOAiB6oggO8xKWe+ltGhvs1VESztN0pProMA7u8euks3B1dRzWMIcbirfj20lg0ga2OT/uff5AfCbyRDGmYE/QAAAABJRU5ErkJggg==),
    auto;
}

@font-face {
  font-family: speech-font;
  src: url(fonts/cartoon-script.ttf);
}
@font-face {
  font-family: title-font;
  src: url(fonts/american-captain.otf);
}
@font-face {
  font-family: lato;
  src: url(fonts/lato-regular.ttf);
}
@font-face {
  font-family: lato;
  src: url(fonts/lato-bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: handwriting;
  src: url(fonts/alphabetized-cassette-tapes.ttf);
}
@font-face {
  font-family: math;
  src: url(fonts/math-font.ttf);
}
@font-face {
  font-family: vtc;
  src: url(fonts/VTC_letterer_pro.ttf);
}
@font-face {
  font-family: demode;
  src: url(fonts/demode.ttf);
}
@font-face {
  font-family: bigtitle;
  src: url(fonts/spooky.ttf);
}
@font-face {
  font-family: lemon-tea;
  src: url(fonts/lemon-tea.ttf);
}

canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  color: #99aabb;
  touch-action: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: lato, serif;
  cursor: var(--mouse-cursor);
}

.mouse {
  user-select: text;
  -webkit-user-select: none;
  cursor: var(--pointer-cursor);
  position: relative;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  z-index: 100;
  user-select: none;
  -webkit-user-select: none;
  cursor: var(--mouse-cursor);
}

#canvas {
  position: absolute;

  z-index: -1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  background-color: #000000;
  opacity: 0;
  transition-property: opacity, background-color, width, height, left, top;
  transition-duration: 0.2s;
}

#im {
  outline: 0 solid transparent;
}

.title {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  color: lightgreen;
  white-space: nowrap;
  text-shadow: 2px 2px darkgreen;
  font-family: title-font;
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
  position: absolute;
  top: 80px;
  left: 310px;
  z-index: 300;
  font-size: 40pt;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  border-left: 16px solid #54a8eb;
  border-right: 16px solid #84b8fb;
  border-bottom: 16px solid #a4d8fb;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 0.3s linear infinite;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
  position: fixed;
}

.loader.loaded {
  display: none;
}

#subject-name {
  text-transform: uppercase;
}

.subject {
  color: white;
  padding: 5px;
  margin: 1px;
}

.subject.selected {
  color: black;
  margin: 0px;
  border: 1px solid black;
  background-color: white;
}

.actions {
  color: white;
  padding: 5px;
  margin: 1px;
  cursor: var(--pointer-cursor);
  display: flex;
  flex-direction: horizontal;
}

.action {
  text-decoration: underline;
  margin-left: 10px;
}

.action:hover {
  color: yellow;
  font-weight: bold;
}

.action.selected {
  color: yellow;
  font-weight: bold;
}

.speech-bubble {
  pointer-events: none;
  position: absolute;
  background-color: #ffffff;
  border-radius: 0.4em;
  z-index: 399;
  width: 200px;
  /*height: 60px;*/
  padding: 10px;
  box-shadow: 1px 1px 0px 0px black;
  /*display: none;*/
  opacity: 0;
  font-family: speech-font;
  font-size: 10pt;
  color: black;

  transition-property: opacity;
  transition-duration: 1s;
  cursor: var(--pointer-cursor);
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 24px solid transparent;
  border-top-color: #ffffff;
  border-bottom: 0;
  border-right: 0;
  margin-left: -12px;
  margin-bottom: -24px;
}

.inventory-item {
  cursor: var(--pointer-cursor);
  /*cursor: pointer;*/
  padding: 2px 5px;
  margin: 1px 5px;
}

.inventory-item.selected {
  border: 1px solid blue;
  margin: 0px 4px;
  background-color: #0088ff66;
}

.inventory-item.deemphasized {
  opacity: 0.6;
}

.inventory-item.deemphasized:hover {
  opacity: 1;
  border: 1px solid yellow;
  margin: 0px 4px;
  background-color: #ffff0066;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;
}

#game-over {
  position: absolute;
  background-color: black;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0.8;
  z-index: 1000;
  /*				cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
*/
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: none;
}

.button {
  width: 150px;
  height: 50px;
  font-size: 20pt;
  border: 2px solid gray;
  color: silver;
  border-radius: 25px;
  background: rgb(2, 100, 136);
  cursor: var(--pointer-cursor);
  /*cursor:  pointer;*/
}

.button:hover {
  border: 2px solid white;
  color: white;
  border-radius: 25px;
  background: rgb(2, 200, 236);
}

.restart {
  margin-top: -100px;
  margin-left: -150px;
  width: 200px;
  height: 100px;
  font-size: 30pt;
  display: none;
  border: 2px solid gray;
  color: silver;
  border-radius: 25px;
  background: rgb(2, 0, 36);
  background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(78, 40, 47, 1) 35%, rgba(150, 63, 63, 1) 100%);
}

.restart:hover {
  color: white;
  border: 2px solid yellow;
  background: linear-gradient(0deg, rgba(102, 100, 136, 1) 0%, rgba(178, 140, 147, 1) 35%, rgba(250, 163, 163, 1) 100%);
}

#game-over-message {
  width: 600px;
  margin-left: -300px;
  margin-top: -250px;
  font-size: 24pt;
  display: none;
}

.scene-tab {
  font-size: 8pt;
  left: 2px;
  top: 2px;
  display: flex;
  flex-direction: row;
  position: absolute;
  z-index: 150;
}

.scene-button {
  font-size: 8pt;
  border-radius: 8pt;
  cursor: var(--pointer-cursor);
}
.scene-button.first {
  border: 2px solid yellow;
}
.scene-button:hover {
  background-color: purple;
  color: white;
}
.scene-button.selected {
  background-color: darkblue;
  color: white;
}
.chat-selection {
  background-color: #000044;
  font-size: 10pt;
  padding: 2px;
  margin-bottom: 2px;
  cursor: var(--select-cursor);
  width: 750px;
  font-family: speech-font;
}
.chat-selection.disabled {
  color: #555599;
  cursor: auto;
}
.chat-selection.selected {
  outline: 2px solid yellow;
  color: black;
  background-color: #cccc66;
  cursor: auto;
}
.chat-selection.disabled {
  color: black;
}
.chat-selection:hover:not(.selected):not(.disabled) {
  color: black;
  background-color: #cccccc;
}
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes restoremouse {
  from {
    top: -50px;
    left: 5px;
  }
  to {
    top: 0px;
    left: 0px;
  }
}

.inceptback:hover {
  -webkit-filter: drop-shadow(0 0 1rem white);
  filter: drop-shadow(0 0 1rem white);
}

.inception {
  transform: translate(-71px, -75px) scale(0.5);
}

.sidebar-room {
  height: 16px;
  width: 70px;
  margin: 2px;
  padding-left: 4px;
  padding-top: 2px;
  background-color: #55f;
  border-radius: 10px;
  display: inline-block;
  color: #ccc;
  font-weight: bold;
  white-space: nowrap;
}

.sidebar-room:hover:not(.disabled):not(.selected):not(.locked) {
  background-color: #8af;
}

.sidebar-room:active:not(.disabled):not(.selected):not(.locked) {
  background-color: #f8a;
}

.sidebar-room.disabled {
  background-color: #76a;
  color: #aaa;
}

.sidebar-room.selected {
  outline: 2px solid yellow;
  color: #fff;
}

.sidebar-room.locked {
  background-color: #76a;
  color: #66a;
}

.sidebar-room:not(.disabled):not(.selected):not(.locked) {
  cursor: var(--pointer-cursor);
  /*cursor: pointer;*/
}

.sidebar-room.wait {
  cursor: wait;
}

.restart {
  cursor: var(--pointer-cursor);
  /*cursor:  pointer;*/
}
.blocked {
  pointer-events: none;
}
.flip_H {
  transform: scale(-1, 1);
}
.math {
  display: none;
  position: absolute;
  font-family: math;
  font-size: 30pt;
  color: #fbf7f5;
  width: 350px;
  top: 150px;
  left: 350px;
  text-align: center;
  vertical-align: middle;
  z-index: 300;
  white-space: nowrap;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.math-result {
  background: transparent;
  height: 35px;
  border: 2px solid #fbf7f5;
  color: #fbf7f5;
  font-family: math;
  font-size: 20pt;
  outline: none;
  margin: 0;
}