/* Setup - setup.scss / variables.scss / mixins.scss */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

figcaption, figure, main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details, menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.visuallyHidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0);
  overflow: hidden;
}

.skipLink {
  position: absolute;
  left: -1000px;
  top: 5px;
  z-index: 999;
  background: white;
  color: black;
}

.skipLink:focus {
  left: 0;
}

/* Keyframe Stylings keyframes.scss */
@-webkit-keyframes arrowFloat {
  0% {
    top: -10px;
  }
  100% {
    top: 10px;
  }
}
@keyframes arrowFloat {
  0% {
    top: -10px;
  }
  100% {
    top: 10px;
  }
}

@-webkit-keyframes smallSideWaysWiggle {
  0% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 0;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 4px;
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  75% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: -4px;
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 0;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes smallSideWaysWiggle {
  0% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 0;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 4px;
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  75% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: -4px;
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    left: 0;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@-webkit-keyframes wigglyText {
  0% {
    top: -5px;
  }
  100% {
    top: 5px;
  }
}

@keyframes wigglyText {
  0% {
    top: -5px;
  }
  100% {
    top: 5px;
  }
}

@-webkit-keyframes buttonPressAnimation {
  0% {
    left: 0;
  }
  50% {
    left: -8px;
  }
  100% {
    left: -6px;
  }
}

@keyframes buttonPressAnimation {
  0% {
    left: 0;
  }
  50% {
    left: -8px;
  }
  100% {
    left: -6px;
  }
}

@-webkit-keyframes leverPullAnimation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  100% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
}

@keyframes leverPullAnimation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  100% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
}

.smallSideWaysWiggle {
  -webkit-animation: smallSideWaysWiggle 1s linear;
          animation: smallSideWaysWiggle 1s linear;
}

.buttonAnimation {
  -webkit-animation: buttonPressAnimation 1s linear forwards;
          animation: buttonPressAnimation 1s linear forwards;
}

.leverAnimation {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation: leverPullAnimation 1s linear forwards;
          animation: leverPullAnimation 1s linear forwards;
}

/* Type Styles - type.scss */
* {
  font-family: sans-serif;
}

html {
  font-size: 62.5%;
}

/* Text Styles */
.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.wiggly {
  position: relative;
  animation: wigglyText 1s infinite ease-in-out alternate-reverse;
}

/* Global Styles - global.scss */
a,
a:visited {
  text-decoration: none;
  border: none;
  color: inherit;
}

html, body {
  background-color: #0E0E0E;
  cursor: url("../assets/handIdle.svg") 15 15, auto;
}

img {
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wrapper {
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
}

/* Header Styles - header.scss */
header {
  background-color: #0E0E0E;
  color: #fefefe;
}

header .wrapper {
  position: relative;
}

h1 {
  margin: 0;
  padding: 4px 10px;
  font-size: 2rem;
  color: #fefefe;
}

.menuButton {
  background-color: #fefefe;
  color: #0E0E0E;
  position: absolute;
  z-index: 999;
  height: 50px;
  border-radius: 50%;
  bottom: -25px;
  right: 10px;
  cursor: url("../assets/handActive.svg") 15 15, auto;
  font-size: 2rem;
}

.menuButton i {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.menuButton:hover, .menuButton:focus {
  bottom: -50px;
  right: -15px;
  height: 100px;
  width: 100px;
}

.menuButton:hover i, .menuButton:focus i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

@media (hover: none) {
  .menuButton {
    height: 75px;
    width: 75px;
  }
}

/* Main Styles - header.scss */
main {
  background-color: #0E0E0E;
  height: 90vh;
  overflow: hidden;
}

main .wrapper {
  position: relative;
}

button {
  background-color: #0E0E0E;
  color: #fefefe;
  border: none;
  cursor: url("../assets/handActive.svg") 15 15, auto;
}

.expandingButton {
  border-radius: 50%;
  -webkit-transition: all 1s;
  transition: all 1s;
  height: 50px;
  width: 50px;
  padding: 0;
  border: 1px solid #0E0E0E;
}

.expandingButton span {
  font-size: 2rem;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  margin: 0;
}

.expandingButton:hover, .expandingButton:focus {
  height: 100px;
  width: 100px;
  cursor: url("../assets/handActive.svg") 15 15, auto;
}

.expandingButton:hover span, .expandingButton:focus span {
  opacity: 1;
}

.expandingButton:focus {
  outline: 2px dashed #EF414C;
}

@media (hover: none) {
  .expandingButton {
    height: 75px;
    width: 75px;
  }
}

@media (hover: none) {
  .expandingButton span {
    opacity: 1;
  }
}

nav {
  position: absolute;
  top: 0;
  z-index: 40;
  height: 90vh;
  width: 100%;
  background-color: #fefefe;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav h2 {
  color: #0E0E0E;
  position: absolute;
  bottom: 90%;
  width: 50%;
}

nav ul.mainNav {
  width: 50%;
  height: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

nav ul.mainNav li {
  height: auto;
}

nav button:disabled {
  background-color: #3f3f3f;
  opacity: 0.7;
}

nav button:disabled:hover span, nav button:disabled:focus span {
  opacity: 0.7;
}

.hiddenNav {
  display: none;
}

.frameHolder {
  -webkit-transition: all 1s;
  transition: all 1s;
}

.buttonDiv {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / span 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / span 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.window {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (20%)[5];
      grid-template-columns: repeat(5, 20%);
  -ms-grid-rows: (18vh)[5];
      grid-template-rows: repeat(5, 18vh);
  min-height: 90vh;
  overflow: hidden;
  background-color: #fefefe;
  position: relative;
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.closedEye {
  position: absolute;
  width: 100%;
  height: 90vh;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hideFrame {
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.hideFrame button {
  display: none;
}

.background {
  z-index: 1;
  position: relative;
}

.midground {
  z-index: 2;
  position: relative;
}

.foreground {
  z-index: 3;
  position: relative;
}

.backgroundLine {
  grid-column: 1 / -1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / span 1;
}

.backgroundLine img {
  height: 100%;
  width: 100%;
  position: relative;
  top: 10px;
}

.door {
  -ms-grid-column: 4;
  -ms-grid-column-span: 2;
  grid-column: 4 / span 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
  position: relative;
  top: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.door img {
  max-width: 250px;
  width: 100%;
}

.door button {
  position: absolute;
  bottom: 150px;
  left: 0;
}

.door button:hover, .door button:focus {
  left: -25px;
  bottom: 125px;
}

/* Frame 1 */
.tutorial {
  background-color: #fefefe;
  position: absolute;
  z-index: 200;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #0E0E0E;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (20%)[5];
      grid-template-columns: repeat(5, 20%);
  -ms-grid-rows: (18vh)[5];
      grid-template-rows: repeat(5, 18vh);
}

.tutorial h2 {
  font-size: 2.5rem;
  -ms-grid-column: 2;
  grid-column: 2;
  margin-top: 60px;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column: 2 / span 3;
}

.tutorial ul {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / span 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column: 2 / span 3;
}

.tutorial ul li {
  position: relative;
  font-size: 2rem;
  margin: 10px 0;
}

@media only screen and (max-width: 650px) {
  .tutorial ul li {
    font-size: 1.5rem;
  }
}

.tutorial ul li::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: -15px;
  top: 5px;
  border-radius: 50%;
  background-color: #0E0E0E;
}

@media only screen and (max-width: 650px) {
  .tutorial ul li::before {
    width: 7.5px;
    height: 7.5px;
    top: 3.5px;
  }
}

.tutorial button {
  position: absolute;
}

.tutorial .buttonDiv {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5 / span 1;
}

.tutorialArrow {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / span 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / span 1;
  position: relative;
  top: 0px;
  animation: arrowFloat 1s infinite ease-in-out alternate-reverse;
}

.tutorialArrow img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.mouseTutorial {
  display: block;
}

@media (hover: none) {
  .mouseTutorial {
    display: none;
  }
}

.touchTutorial {
  display: none;
}

@media (hover: none) {
  .touchTutorial {
    display: block;
  }
}

.characterOne {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-row: 2 / span 3;
  right: 20px;
}

.characterOne img {
  height: 100%;
  min-height: 400px;
}

.characterOne button {
  position: absolute;
  top: 100px;
  left: 50px;
}

.characterOne button:hover, .characterOne button:focus {
  top: 75px;
  left: 25px;
}

.shrooms {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / span 1;
  -ms-grid-column: 4;
  grid-column: 4;
  z-index: 1;
  bottom: 50px;
  margin-bottom: 10px;
}

.shrooms img {
  height: 100%;
  min-height: 250px;
  position: relative;
}

.shrooms button {
  z-index: 1;
  position: absolute;
  top: 75px;
  left: 0;
}

.shrooms button:hover, .shrooms button:focus {
  top: 50px;
  left: -25px;
}

.bone {
  -ms-grid-column: 3;
  grid-column: 3;
  grid-row: -2;
  margin-bottom: 20px;
}

.bone img {
  height: 100%;
}

.bone button {
  position: absolute;
  left: 0;
  bottom: 50px;
}

.bone button:hover, .bone button:focus {
  left: -25px;
  bottom: 25px;
}

/* Frame 2 */
.portrait {
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-column: 3 / span 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1 / span 4;
  position: relative;
  top: -250px;
  right: -25px;
  z-index: 0;
}

@media only screen and (max-width: 1080px) {
  .portrait {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    grid-row: 1 / span 4;
    right: -300px;
    top: -300px;
  }
}

@media only screen and (max-width: 650px) {
  .portrait {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    grid-row: 1 / span 4;
    right: 0px;
    top: -300px;
  }
}

@media only screen and (max-width: 400px) {
  .portrait {
    display: none;
  }
}

.conversationBox {
  z-index: 2;
  background-color: #fefefe;
  color: black;
  border-radius: 25px;
  border: 10px solid #0E0E0E;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / span 4;
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  grid-row: 4 / span 2;
  padding: 15px;
  margin: 10px;
  position: relative;
}

@media only screen and (max-width: 1080px) {
  .conversationBox {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1 / span 4;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    grid-row: 3 / span 3;
  }
}

@media only screen and (max-width: 650px) {
  .conversationBox {
    grid-column: 1 / -1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    grid-row: 3 / span 2;
    margin-top: 50px;
    padding-bottom: 40vh;
  }
}

@media only screen and (max-width: 400px) {
  .conversationBox {
    grid-row: 1 / -1;
    margin-top: 20vh;
  }
}

.conversationBox h2 {
  font-size: 2rem;
  margin: 0;
  margin-top: 10px;
}

.conversationBox > p {
  font-size: 1.7rem;
  margin: 0;
  padding-bottom: 10px;
}

.leaveButton {
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;
}

@media only screen and (max-width: 650px) {
  .leaveButton {
    right: 60px;
  }
}

.leaveButton button {
  position: absolute;
  right: -50px;
  bottom: 0px;
}

.leaveButton button:hover, .leaveButton button:focus {
  right: -75px;
  bottom: -25px;
}

@media (hover: none) {
  .leaveButton button {
    left: 0px;
    bottom: -20px;
  }
}

.buttonFlex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  margin-top: 0px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.buttonFlex .conversationButton {
  z-index: 2;
  position: relative;
  top: 0;
  width: 100%;
  border-radius: 25px;
  margin: 5px 0;
  padding: 15px;
}

.buttonFlex .conversationButton p, .buttonFlex .conversationButton span {
  font-size: 1.5rem;
  color: #fefefe;
  opacity: 0.7;
  text-align: left;
  margin: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: left;
          transform-origin: left;
}

.buttonFlex .conversationButton p span, .buttonFlex .conversationButton span span {
  font-size: inherit;
  opacity: 1;
}

.buttonFlex .conversationButton:focus {
  outline: 2px dashed #EF414C;
}

.buttonFlex .conversationButton:hover p, .buttonFlex .conversationButton:hover span, .buttonFlex .conversationButton:focus p, .buttonFlex .conversationButton:focus span {
  opacity: 1;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@media (hover: none) {
  .buttonFlex .conversationButton p, .buttonFlex .conversationButton span {
    opacity: 1;
  }
}

/* Frame 3 */
.placard {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 4;
  grid-row: 4;
  margin-top: 40px;
}

.placard img {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  width: 100%;
  min-height: 150px;
  min-width: 200px;
}

.placard p {
  position: absolute;
  text-align: center;
  top: 20px;
  left: 80px;
  font-size: 2rem;
}

@media only screen and (max-width: 650px) {
  .placard {
    display: none;
  }
}

.key {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  -ms-grid-row: 4;
  grid-row: 4;
  margin-left: 50px;
}

.key img {
  height: 100%;
}

.skull {
  -ms-grid-column: 4;
  grid-column: 4;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 3 / span 2;
  position: relative;
}

.skull img {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.skull button {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 50px;
}

.skull button:hover, .skull button:focus {
  left: -25px;
  bottom: 25px;
}

/* Frame 4 */
.frameFour .door {
  -ms-grid-column: 2;
      grid-column-start: 2;
}

/* Frame 6 */
.frameSix .door {
  -ms-grid-column: 3;
      grid-column-start: 3;
}

/* Interactive Panel in frame 7 and 8 */
.panel img,
.panelInteractable img {
  width: 100%;
  max-height: 200px;
  max-width: 150px;
}

.panel {
  margin-top: 50px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
}

.panelInteractable {
  margin-top: 50px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  position: relative;
}

.panelInteractable img {
  position: absolute;
}

.panelInteractable button {
  position: absolute;
  z-index: 5;
  left: -10px;
  top: 50px;
}

.panelInteractable button:hover, .panelInteractable button:focus {
  left: -35px;
  top: 25px;
}

/* Frame 7 */
.frameSeven .panelInteractable img {
  position: absolute;
  left: 65px;
}

/* Frame 9 */
.frameNine .door {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
}

.frameNine .door img {
  width: 150px;
  height: 250px;
  max-width: 150px;
  max-height: 250px;
}

.rightDoor {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / span 1;
  position: relative;
  top: 35px;
}

.leftDoor {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
}

@media only screen and (max-width: 650px) {
  .leftDoor {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1;
  }
}

/* End Frame */
.endFrame .window {
  background-color: black;
}

.endFrame button {
  position: absolute;
  z-index: 10;
  background-color: #EF414C;
  color: #fefefe;
}

.endFrame button:hover, .endFrame button:focus {
  background-color: #EF414C;
}

.endingIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / span 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column: 2 / span 3;
}

@media only screen and (max-width: 400px) {
  .endingIcon {
    grid-column: 1 / -1;
  }
}

.endingIcon h3 {
  background-color: #fefefe;
  color: #EF414C;
  font-size: 3rem;
  z-index: 10;
  padding: 25px;
}

.endingEye {
  position: absolute;
  z-index: 2;
}

.resetButton {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 60px;
  right: 10px;
  background-color: #0E0E0E;
  border-radius: 25px;
  font-size: 1.5rem;
}

.resetButton:focus {
  outline: 2px dashed #EF414C;
}

.resetButton:hover, .resetButton:focus {
  background-color: #EF414C;
}

@media (hover: none) {
  .resetButton {
    background-color: #EF414C;
  }
}

/* Footer Styles - footer.scss */
footer {
  background-color: #0E0E0E;
  color: #fefefe;
  text-align: center;
}

footer p {
  margin: 0;
  padding: 10px 0;
  font-size: 12px;
}