html {
	background-color: whitesmoke;
	background-image: url('./images/background.webp');
	background-size: 100vw 100vh;
      background-position: absolute;
	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;
}

.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%;
}


.pause {
      height: 70px;
      width: 70px;
      border-radius: 50%;
	background-color: transparent;
      background-image: url(/images/pause.webp);
      background-size: 100% 100%;
      top: calc(50% - 35px);
      right: calc(7.5vh - 35px);
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: 40px;
      color: black;
}


.unpauseButt {
      bottom: 30%;
}

.saveButton {
      top: 30px;
      right: 50px;
      font-size: 40px !important;
}

.unpauseButton {
      border: none;
      background-color: transparent;
      font-size: 60px;
      color: rgb(255, 255, 255, 0.8);
      font-family: 'Passion One';
}

.unpauseButton:hover {
      color: rgb(255, 255, 255, 0.5);
}

.unpauseButton:active {
      color: rgb(255, 255, 255, 0.2);
}

.pauseOverlay {
      height: 100vh;
      width: 100vw;
      top: 0;
      left: 0;
      pointer-events: all;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.2);
      box-shadow: inset 0px 0px 500px 100px black;
      backdrop-filter: blur(20px);
      display: none;
}

.unpause {
      font-family: 'Passion One';
      font-size: 160px;
      color: rgb(255, 255, 255, 0.8);
      width: 1000px;
      height: 400px;
      top: calc(50% - 200px);
      left: calc(50% - 500px);
      z-index: 101;
      display: flex;
      justify-content: center;
      align-content: center;
}

@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;
}

.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;
    }