@font-face {
  font-family: 'Amstrad';
  src: url('../fonts/Ac437_Amstrad_PC-2y.ttf') format('truetype');
}

/* lock scroll same as index */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background-image: url('images/office-2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Amstrad', monospace;
}

/* same scene scaling as index */
#scene {
  position: relative;
  height: 80vh;
  width: calc(80vh * (3224 / 2330));
  max-width: 80vw;
  max-height: calc(80vw * (2330 / 3224));
}

/* back button */
#backbutton {
  position: fixed;
  top: 16px;
  left: 20px;
  font-family: 'Amstrad', monospace;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  z-index: 999;
  background: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border: 1.5px solid #333;
}

#backbutton:hover {
  background: rgba(255,255,255,0.9);
}

/*character positions*/

#char-ian {
  left: 90%;
  top: 33%;
  width: 44%;
  z-index: 3;
}

#char-wyrm {
  left: -10%;
  top: 37%;
  width: 22%;
  z-index: 3;
}

#char-rayzl img {
  transform: scaleX(-1);
}

#char-rayzl {
  left: -37%;
  top: 41%;
  width: 29%;
  z-index: 3;
}

#char-ziv {
  left: 70%;
  top: 60%;
  width: 23%;
  z-index: 3;
}

#char-barley {
  left: 50%;
  top: 50%;
  width: 20%;
  z-index: 3;
}

#char-spring {
  left: 14%;
  top: 69%;
  width: 25%;
  z-index: 3;
}

#char-cherub {
  left: 13%;
  top: 3%;
  width: 22%;
  z-index: 3;
}

.item img {
  filter: 
    drop-shadow(4px 4px 6px rgba(0,0,0,0.9));
}