html {
	background-color: whitesmoke;
	background-image: url('./images/background.webp');
    /* background-size: 100vw 100vh; */
    background-size: cover;
	font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif; 
	color: whitesmoke;
	overflow: hidden;
    user-select: none;
}

* {
    user-select: none; 
    -moz-user-select: none;
    -webkit-text-select: none;
    -webkit-user-select: none;
    cursor: default;
}

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

.position {
	position: absolute;
}

.inventory {
	height: 15vh;
	width: 100%;
	top: -10vh;
	left: 0;
	display: flex;
	justify-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;
}

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

.perspective {
    perspective: 500px;
    right: 0px;
    top: 0px;
    width: 100vw;
	height: 100vh;
}

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

/* .temperature {
    height: 150px;
    top: 425px;
    left: 300px;
    filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
} */

.temperature {
      height: 550px;
      top: 425px;
      left: 100px;
      filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
}

/* .voltage {
    height: 125px;
    top: 450px;
    right: 325px;
} */

.voltage {
      height: 550px;
      top: 425px;
      right: 100px;
      filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
}

.pipes {
    width: 600px;
    top: 80px;
    left: calc(50vw - 275px);
    filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
}

.map {
      width: 300px;
      top: 100px;
      left: 60px;
}

.newspapers {
      width: 180px;
      top: 500px;
      left: 500px;
      filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
}

.counter {
    height: 510px;
    top: 495px;
    left: 220px;
}

.indicator {
      height: 50px;
      width: 100px;
      top: 725px;
      background-color: red;
}

.centerThing {
      width: 300px;
      height: 230px;
      top: 500px;
      left: calc(50vw - 150px);
}

.centerThingButton {
      width: 25px;
      height: 25px;
      background-color: rgb(255, 0, 0);
      border-radius: 50%;
      left: calc(50% - 12.5px);
      bottom: -40px;
      z-index: 10;
}

.centerThingButton:active {
      filter: brightness(50%);
}

.thingAnimationHolder {
      width: 200px;
      height: 230px;
      left: calc(50% - 100px);
      top: 8px;
      border-top-left-radius: 50% 70px;
      border-top-right-radius: 50% 70px;
      border-bottom-left-radius: 50% 25px;
      border-bottom-right-radius: 50% 25px;
      overflow: hidden;
      display: flex;
      justify-content: center;
	align-content: center;
}

/* .thingBottom {
      width: 200px;
      height: 45px;
      bottom: 0px;
      border-bottom-left-radius: 50% 25px;
      border-bottom-right-radius: 50% 25px;
      border-top-left-radius: 50% 25px;
      border-top-right-radius: 50% 25px;
      animation-name: swirlingColors;
      animation-duration: 7s;
      animation-iteration-count: infinite;
} */

/* .thingBottom {
      width: 200px;
      height: 200px;
      bottom: 0px;
      perspective: 2000px;
}

.thingBottomPerspective {
      width: 100%;
      height: 100%;
      background-color: red;
      border-radius: 50%;
      transform: rotateX(80deg) translateZ(-77px);
      animation-name: spinDiv;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}

.shape {
      height: 30px;
      width: 30px;
      background-color: blue;
      top: 20px;
      left: calc(50% - 15px);
} */

.thingBottom {
      width: 200px;
      height: 125px;
      bottom: 0px;
      background: 
            radial-gradient(100% 50px at 50% 25px, var(--liquidColor) 50%, transparent 50%),
            linear-gradient(transparent 25px, var(--liquidColor) 25px);
      animation: 3s waterMovement, 15s swirlingColors; 
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      opacity: 0.2;
}

.thingBottom2 {
      width: 200px;
      height: 125px;
      bottom: 0px;
      background: 
            radial-gradient(100% 50px at 50% 25px, rgb(196, 229, 240) 50%, transparent 50%),
            linear-gradient(transparent 25px, lightblue 25px);
      mix-blend-mode: hard-light;
      transform-origin: 50% 25px;
      animation: 3s waterMovement;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}

.thingSVG {
      bottom: 0px;
      left: calc(50% - 100px);
      animation: 1s opacitySwap;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}

.thingSVG2 {
      bottom: 0px;
      left: calc(50% - 100px);
      animation: 1s opacitySwap 0.5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}

.thingHeater {
      bottom: 0px;
      left: calc(50% - 100px);
      overflow: hidden;
      height: 230px;
      width: 100%;
}

.roomOverlay {
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      pointer-events: none;
}

.textCenter {
      z-index: 53;
      color: black;
      font-size: 180px;
      top: 50%;
      left: 50%;
      text-align: center;
}

.explosion {
      display: none;
      z-index: 52;
      height: 300px;
      aspect-ratio: 1;
      top: 500px;
      left: calc(50vw - 150px);
      background-color: lightblue;
      border-radius: 50%;
      background: radial-gradient(circle at center, red, black);
      /* background: radial-gradient(
            circle at center,
            var(--explosionColorBase),
            var(--explosionColorBase) calc(var(--innerCircleSize)),
            var(--explosionColorSecondary) calc(var(--innerCircleSize)),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 25px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 25px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 50px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 50px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 75px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 75px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 100px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 100px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 125px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 125px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 150px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 150px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 175px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 175px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 200px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 200px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 225px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 225px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 250px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 250px),
            var(--explosionColorSecondary) calc(var(--innerCircleSize) + 275px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 275px),
            var(--explosionColorBase) calc(var(--innerCircleSize) + 300px)
      ); */
      filter: blur(5px);
      justify-content: center;
	align-content: center;     
}

.explode {
      display: flex !important;
      animation: 5s growCircle;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
}

.steamHolder {
      animation: 3s steam;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}

.shaky {
      z-index: 51;
      animation: 0.2s shakey infinite, 5s addGlow 1;
      animation-iteration-count: infinite;
      animation-timing-function: linear;     
      animation-fill-mode: forwards;  
}

.slosh {
      animation: 0.2s slosh, 3s waterMovement, 5s swirlingColors;
      animation-iteration-count: infinite;
      animation-timing-function: linear;       
}

.dimRoom {
      z-index: 50;
      background-color: black;
      animation: 5s powerOutage;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      pointer-events: all;
}

.fadeIn {
      animation: 3s fadeInOut;
      animation-iteration-count: 3;
      animation-timing-function: linear;
      animation-fill-mode: forwards;   
}

.excelButton {
      z-index: 54;
      color: black;
      font-size: 40px;
      top: 50%;
      left: 50%;
      text-align: center;
      background-color: whitesmoke;
      padding: 10px; 
      border-radius: 10px;
      border: 2px inset rgb(214, 214, 214)
}

.excelButton:hover {
      background-color: rgb(214, 214, 214);
}

/* @keyframes gradientChange {
      0%   {
            --innerCircleSize: 0px;
            --explosionColorBase: lightblue;
            --explosionColorSecondary: #eee;
      }
      10%  {
            --innerCircleSize: 5px;
            --explosionColorBase: lightblue;
            --explosionColorSecondary: #eee;
      }
      20%  {
            --innerCircleSize: 10px;
            --explosionColorBase: lightblue;
            --explosionColorSecondary: #eee;
      }
      30%  {
            --innerCircleSize: 15px;
            --explosionColorBase: lightblue;
            --explosionColorSecondary: #eee;
      }
      40%  {
            --innerCircleSize: 20px;
            --explosionColorBase: lightblue;
            --explosionColorSecondary: #eee;
      }
      50% {
            --innerCircleSize: 0px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
      60%  {
            --innerCircleSize: 5px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
      70%  {
            --innerCircleSize: 10px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
      80%  {
            --innerCircleSize: 15px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
      90%  {
            --innerCircleSize: 20px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
      100% {
            --innerCircleSize: 25px;
            --explosionColorBase: #eee;
            --explosionColorSecondary: lightblue;
      }
} */

@keyframes growCircle {
      0%   { 
            scale: 0.1;
            mix-blend-mode: multiply;
      }
      20%  { 
            scale: 1;
            mix-blend-mode: multiply;
      }
      40%  { 
            scale: 2;
            mix-blend-mode: multiply;
      }
      60%  { 
            scale: 1;
            mix-blend-mode: multiply;
      }
      70%  { 
            scale: 3;
            mix-blend-mode: screen;
      }
      80%  { 
            scale: 16;
            mix-blend-mode: screen;
      }
      90% { 
            scale: 20;
            mix-blend-mode: normal;
            opacity: .9;
      }
      100% { 
            scale: 24;
            mix-blend-mode: normal;
      }
}

@keyframes addGlow {
      0%   { filter: none;}
      100%  { filter: drop-shadow(0px 0px 100px lightblue);}
}

@keyframes powerOutage {
      0%   { opacity: 0;}
      100%  { opacity: 1;}
}

@keyframes fadeInOut {
      0%   { opacity: 0;}
      33%  { opacity: 1;}
      66%  { opacity: 1;}
      100%   { opacity: 0;}
}

@keyframes shakey {
      0%   { left: calc(50vw - 150px); }
      25%  { left: calc(50vw - 145px); }
      50%   { left: calc(50vw - 150px); }
      75%  { left: calc(50vw - 155px); }
      100%   { left: calc(50vw - 150px); }
}

@keyframes steam {
      0%   { bottom: -100px; }
      100%  { bottom: 0px; }
}

/* @property --innerCircleSize {
      inherits: true;
      initial-value: 0px;
}

@property --explosionColorBase {
      syntax: "<color>";
      inherits: true;
      initial-value: lightblue;
}

@property --explosionColorSecondary {
      syntax: "<color>";
      inherits: true;
      initial-value: #eee;
} */

@property --liquidColor {
      syntax: "<color>";
      inherits: true;
      initial-value: lightblue;
}

@keyframes opacitySwap {
      0%   { opacity: 0; }
      50%  { opacity: 1; }
      100%  { opacity: 0; }
}

@keyframes slosh {
      0%   { transform: rotate(5deg); }
      50%  { transform: rotate(-5deg); }
      100%  { transform: rotate(5deg); }
}

@keyframes waterMovement {
      0%   { height: 125px; }
      50%  { height: 115px; }
      100%  { height: 125px; }
}

@keyframes spinDiv {
      0%   {transform: rotateX(80deg) translateZ(-77px) rotateZ(0deg);}
      25%  {transform: rotateX(80deg) translateZ(-77px) rotateZ(90deg);}
      50%  {transform: rotateX(80deg) translateZ(-77px) rotateZ(180deg);}
      75%  {transform: rotateX(80deg) translateZ(-77px) rotateZ(270deg);}
      100%  {transform: rotateX(80deg) translateZ(-77px) rotateZ(360deg);}
}

@keyframes swirlingColors {
      0%   {--liquidColor: rgba(0, 255, 255, 1);}
      14%  {--liquidColor: rgba(255, 0, 255, 1);}
      28%  {--liquidColor: rgba(255, 255, 0, 1);}
      42%  {--liquidColor: rgba(0, 255, 0, 1);}
      56%  {--liquidColor: rgba(0, 0, 255, 1);}
      70%  {--liquidColor: rgba(255, 0, 0, 1);}
      84%  {--liquidColor: rgba(0, 0, 0, 1);}
      100% {--liquidColor: rgba(0, 255, 255, 1);}
}

.voltageCheck {
      display: none;
}

.pipeCheck {
      display: none;
      width: 100%;
      height: 100%;
}

.temperatureCheck {
      display: none;
      width: 100%;
      height: 100%;
}

.fax {
      height: 90px;
      top: 435px;
      right: 500px;
}

.faxDataItem {
      top: 0px;
      width: 70%;
      transform-origin: top center;
      transform: rotateX(-30deg) translateY(100px);
      transition: 2s all ease-out;
      display: flex;
      justify-content: center;
	align-content: center;
      filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
}

.faxDataHider {
      perspective: 2000px;
      top: -70%;
      left: 1%;
      height: calc(16% - -70%);
      width: 90%;
      overflow: hidden;
}

/* .faxDataItem {
      top: 0px;
      width: 70%;
      transform-origin: top center;
      transform: rotateX(85deg) translateY(-1000px);
      transition: 2s all ease-out;
      display: flex;
      justify-content: center;
	align-content: center;
      filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.5));
} */

/* .faxDataHider {
      perspective: 2000px;
      bottom: -8px;
      left: 0px;
      height: 20%;
      width: 100%;
      overflow: hidden;
} */