html {
      background-color: whitesmoke;
      
      font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
      color: whitesmoke;
      overflow: hidden;
      user-select: none;
}

:root {
      --antiBlurScaling: 2;
      --lecternHeight: calc(var(--antiBlurScaling) * 146px);
      --lecternWidth: calc(var(--lecternHeight) * 2);
      --lecternDistance: calc(var(--lecternHeight) / var(--antiBlurScaling));
      --baseWidth: calc(var(--lecternWidth) * 1.4 / var(--antiBlurScaling));
      --legDepth: 100px;
      --legHeight: 125px;
      --lecternTilt: 45deg;
}

.screenKeeper {
      top: 0px;
      left: 0px;
      width: 1920px;
      height: 1080px;
      transform-origin: 0% 0%;
      background-image: url('./images/background.webp');
      background-size: 100% 95%;
      background-position: absolute;
}

.position {
      position: absolute;
}

.inventory {
      height: 15vh;
      width: 100%;
      top: -10vh;
      left: 0;
      display: flex;
      justify-content: center;
      align-content: center;
      gap: 5vw;
      z-index: 10;
      background-color: transparent;
      background-image: url(/images/inventoryBackground.webp);
      background-size: 100% 100%;
      opacity: 50%;
}

@font-face {
      font-family: 'Passion One';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/passionone/v18/Pby6FmL8HhTPqbjUzux3JEMq007vyJc.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.inventoryItem {
      height: 80%;
      display: flex;
      justify-content: center;
      margin-top: 1vh;
      margin-bottom: auto;
      filter: drop-shadow(-1px 1px 1px rgba(50, 50, 0, 0.5));
}

.dragItem {
      position: absolute !important;
      z-index: 20;
}

.notransition {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -o-transition: none !important;
      transition: none !important;
}

.position {
      position: absolute;
}

.imgcontainer img {
      max-height: 100%;
      max-width: 100%;
      pointer-events: none;
      object-fit: contain;
}

.lecternContainer {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: inherit;
}

.plaques {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: inherit;
      opacity: 0;
}

.plaques img {
      max-width: 100%;
      max-height: 100%;
}

.perspective {
      position: absolute;
      display: flex;
      top: 40%;
      perspective: 1000px;
      perspective-origin: var(--lecternHeight);
}

.lectern {
      margin: auto;
      width: var(--lecternWidth);
      height: var(--lecternHeight);
      position: absolute;
      transform-style: preserve-3d;
      transition: all .3s ease-in;
      transform: rotateY(-30deg);
}

.face {
      background-image: url('./images/plank.webp');
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: inherit;
      font-size: 60px;
      color: #fff;
      transform-style: preserve-3d;
      transform-origin: center;
      transition: all .3s ease-in;
}

.book {
      height: calc(var(--lecternHeight) * .92);
      width: 100%;
      scale: 1;
      position: relative;
      display: grid;
      /* pointer-events: none; */
      backface-visibility: hidden;
}

.book img {
      pointer-events: none;
}

.page {
      height: calc(var(--lecternHeight) * .92);
      font-size: calc(var(--antiBlurScaling) * 15px);
      color: black;
      margin-left: calc(var(--antiBlurScaling) * 20px);
      overflow: hidden;
      column-count: 2;
      pointer-events: none;
}

.bigText {
      font-size: calc(var(--antiBlurScaling) * 25px);
      /* text-decoration: underline; */
}

.number {
      height: calc(var(--antiBlurScaling) * var(--lecternHeight) / 3.5);
      transform-origin: top left;
      scale: calc(1 / var(--antiBlurScaling));
      left: calc(var(--antiBlurScaling) * 5px);
      top: calc(var(--antiBlurScaling) * 5px);
      pointer-events: none;
      backface-visibility: hidden;
}

.closedBook {
      height: calc(var(--lecternHeight) * .90);
      scale: 1;
      /* pointer-events: none; */
      backface-visibility: hidden;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      z-index: -1;
}

.closedTitle {
      /* background-color: whitesmoke; */
      padding-left: 10px;
      padding-right: 10px;
      font-size: calc(var(--antiBlurScaling) * 15px);
      font-family: 'Bebas Neue';
      color: gold;
      overflow: hidden;
      pointer-events: none;
      margin-top: 50px;
      text-align: center;
}

/* FAKE LECTERNS BOOK STUCK ON SIDES */

/* .one {
    transform: translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
}

.two {
    transform: rotateX(60deg) translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
}

.three {
    transform: rotateX(120deg) translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
}

.four {
    transform: rotateX(180deg) translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
}

.five {
    transform: rotateX(240deg) translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
}

.six {
    transform: rotateX(300deg) translateZ(var(--lecternDistance)) scale(calc(1 / var(--antiBlurScaling)));
} */


.one {
      transform: translateZ(var(--lecternDistance)) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.two {
      transform: rotateX(60deg) translateZ(var(--lecternDistance)) rotateX(-60deg) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.three {
      transform: rotateX(120deg) translateZ(var(--lecternDistance)) rotateX(-120deg) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.four {
      transform: rotateX(180deg) translateZ(var(--lecternDistance)) rotateX(-180deg) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.five {
      transform: rotateX(240deg) translateZ(var(--lecternDistance)) rotateX(-240deg) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.six {
      transform: rotateX(300deg) translateZ(var(--lecternDistance)) rotateX(-300deg) rotateX(var(--lecternTilt)) scale(calc(1 / var(--antiBlurScaling)));
}

.wall {
      background-size: 100% 100%;
      height: calc(var(--lecternHeight) * 1.5);
      width: calc(var(--lecternHeight) * 1.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      backface-visibility: inherit;
      transform-style: preserve-3d;
      transition: all .3s ease-in;
}

.rightWall {
      transform: rotateY(90deg) translateZ(var(--lecternDistance));
}

.leftWall {
      transform: rotateY(90deg) translateZ(calc(var(--lecternDistance) * -1));
}


/* .slat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lecternWidth);
    height: calc(var(--lecternHeight) * 0.8);
    position: absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color: #fff;
    transform-origin: 50% 0%;
    transition: all .3s ease-in;
}

.slatone {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) scale(calc(1 / var(--antiBlurScaling)));
}

.slattwo {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) rotateX(60deg) scale(calc(1 / var(--antiBlurScaling)));
}

.slatthree {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) rotateX(120deg) scale(calc(1 / var(--antiBlurScaling)));
}

.slatfour {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) rotateX(180deg) scale(calc(1 / var(--antiBlurScaling)));
}

.slatfive {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) rotateX(240deg) scale(calc(1 / var(--antiBlurScaling)));
}

.slatsix {
    transform: translateY(calc(var(--lecternHeight) / 2)) rotateX(90deg) rotateX(300deg) scale(calc(1 / var(--antiBlurScaling)));
}

.plank {
    background-image: url('./images/darkplank.webp');
    background-size: 100% 100%;
    height: 50px;
    width: calc(var(--lecternHeight) * 0.8);
    transform: rotate(90deg);
}

.leftPlank {
    position: absolute;
    left: -80px;
}

.rightPlank {
    position: absolute;
    right: -80px;
} */

.leg {
      background-image: url('./images/darkplank.webp');
      background-size: 120% 120%;
      background-position: 10% 10%;
      width: var(--legHeight);
      height: var(--legDepth);
      transform-origin: center left;
      z-index: -1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      backface-visibility: inherit;
      transform-style: preserve-3d;
}

.rightLeg {
      transform: rotateY(90deg) translate3d(0, calc(var(--lecternHeight)), calc(var(--lecternWidth) / 2 / var(--antiBlurScaling))) rotate(90deg);
}

.leftLeg {
      transform: rotateY(90deg) translate3d(0, calc(var(--lecternHeight)), calc(var(--lecternWidth) / -2 / var(--antiBlurScaling))) rotate(90deg);
}

.bottom {
      background-image: url('./images/darkplank.webp');
      background-size: 120% 120%;
      background-position: 10% 10%;
      width: var(--baseWidth);
      height: 200px;
      transform-origin: top center;
      transform: translate3d(calc(var(--baseWidth) / -2), calc(var(--lecternHeight) + var(--legHeight)), -100px) rotateX(90deg);
      /* transform: translateZ(0) translateX(calc(var(--baseWidth) / -2)) translateY(0) rotateX(90deg); */
      z-index: -2;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      backface-visibility: inherit;
      transform-style: preserve-3d;
}

.center {
      display: flex;
      width: 100%;
      height: 100%;
      margin: auto;
      justify-content: center;
}

.button {
      background-color: whitesmoke;
      border: none;
      border-radius: 4px;
      color: #747474;
      font-weight: bold;
      padding: 4px 8px;
      text-align: center;
      font-size: 20px;
      font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
      margin: 5px 0px;
      opacity: 0.9;
      transition: 0.3s;
      display: inline-block;
      text-decoration: none;
      cursor: pointer;
}

.button:hover {
      opacity: 1
}

.button:active {
      background-color: white;
}

@font-face {
      font-family: 'Bebas Neue';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}