@font-face {
  font-family: "Arista Pro";
  src:
    url("assets/font/aristapro-light.otf") format("opentype");
}
body {
  padding: 0;
  margin: 0;
  background-color: white;
  /* cursor:none !important; */
  width:100vw;
  height:100vh;
  overflow:hidden;
  color:white;
  /* pointer-events:none; */

  background-image: url("img_jpeg_compressed/loading-entrance.jpg");
  background-repeat: repeat;
  background-size:contain;
  background-position: center;
  background-size: 550px;
}

body.waiting, body.waiting *{
  cursor:wait !important;
  /* pointer-events:none !important; */
}

body.waiting button{

  pointer-events:none !important;
}

body.lobby{
   background-image: url("img_jpeg_compressed/loading-lobby.jpg");
}

body.lockers{
   background-image: url("img_jpeg_compressed/loading-lockers.jpg");
}

body.baths{
   background-image: url("img_jpeg_compressed/loading-baths.jpg");
}

.bgContainer{
  position:fixed;
  width:100vw;
  height:100vh;
  top:0px;
  left:0px;

  background-repeat: repeat;
  background-size:contain;
  background-position: center;
  background-size: 550px;

  /* background-size: 300px; */
  transition: opacity 2s;
  opacity:0;
}

.bgContainer.entrance.spring.day{
background-image: url("bg/spring_day.jpg");
}

.bgContainer.entrance.spring.night{
background-image: url("bg/spring_night.jpg");
}

.bgContainer.entrance.summer.day{
background-image: url("bg/summer_day.jpg");
}

.bgContainer.entrance.summer.night{
background-image: url("bg/summer_night.jpg");
}

.bgContainer.entrance.fall.day{
background-image: url("bg/fall_day.jpg");
}

.bgContainer.entrance.fall.night{
background-image: url("bg/fall_night.jpg");
}

.bgContainer.entrance.winter.day{
background-image: url("bg/winter_day.jpg");
}

.bgContainer.entrance.winter.night{
background-image: url("bg/winter_night.jpg");
}

.bgContainer.lobby{
background-image: url("bg/lobby.jpg");
background-size: 300px;
}

.bgContainer.lockers{
background-image: url("bg/lockers.jpg");
background-size: 300px;
}

.bgContainer.baths{
background-image: url("bg/baths.jpg");
background-size: 300px;
}

canvas, video {
  margin: auto;
  visibility: visible;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* cursor: none !important; */
  transition: opacity 2s;
}

#buttonContainer{
  margin: auto;
  opacity:1;
  visibility: visible;
  position:absolute;
  width:550px;
  height:400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* cursor: none !important; */
  transition: opacity 2s;
  z-index:10;
  pointer-events:none;
  background-image:url('/img_jpeg_compressed/loading-entrance.jpg');
  background-size:contain;
  /* opacity:1 !important; */
	}

  #buttonContainer.lobby{
    background-image:url('/img_jpeg_compressed/loading-lobby.jpg');
  }
  #buttonContainer.lockers{
    background-image:url('/img_jpeg_compressed/loading-lockers.jpg');
  }
  #buttonContainer.baths{
    background-image:url('/img_jpeg_compressed/loading-baths.jpg');
  }

    #buttonContainer button{
      /* background:red; */
      position:absolute;
      cursor: pointer;
      opacity:0 !important;
       pointer-events:none;
    }

    /* Button CSS */

  .right{
      width:75px;
      height:400px;
      top:0px;
      right:0px;
    }

    .left{
      width:75px;
      height:400px;
      top:0px;
      left:0px;
    }

  .top{
    width:550px;
    height:75px;
    top:0px;
    left:0px;

  }
  .bottom{
    width:550px;
    height:75px;
    bottom:0px;
    left:0px;
  }

  /* Entrance button */

  button#toLobbyFromEntrance{
    width: 177px;
    height: 342px;
    left: 186px;
    top: 58px;
  }


  button#sign{
    width: 67px;
    height: 40px;
    left: 397px;
    top: 154px;
  }

  /* Lobby buttons */

  button#note{
    width: 80px;
    height: 40px;
    left: 299px;
    top: 128px;
  }

    button#key{
    width: 64px;
    height: 40px;
    left: 214px;
    top: 130px;
  }

  button#towel{
    width: 100px;
    height: 38px;
    left: 112px;
    top: 59px;
  }

    button#bell{
     width: 59px;
    height: 52px;
    left: 390px;
    top: 120px;
  }



  button#toLockerroomFromLobby{
    width: 138px;
    height: 238px;
    left: 204px;
    top: 37px;
  }

  button#toShoelockerFromLobbyExit{
    width: 118px;
    height: 138px;
    right: 0px;
    top: 202px;
  }

  button#toShoelockerFromLobbyLockerroom{
    width: 138px;
    height: 150px;
    left: 10px;
    top: 188px;
  }

  button#shoelocker1button{
    width: 236px;
    height: 200px;
    left: 38px;
    top: 0px;
  }
  button#shoelocker2button{
    width: 236px;
    height: 200px;
    left: 277px;
    top: 0px;
  }
  button#shoelocker3button{
    width: 236px;
    height: 200px;
    left: 38px;
    bottom: 0px;
  }
  button#shoelocker4button{
    width: 236px;
    height: 200px;
    left: 277px;
    bottom: 0px;
  }
  button#shoesButton{
    width: 349px;
    height: 351px;
    left: 94px;
    bottom: 14px;
  }

  button#toFishtankFromVending{
    width: 108px;
    height: 99px;
    right: 0px;
    top: 128px;
  }

   button#toFishtankFromExit{
    width: 138px;
    height: 107px;
    left: 0px;
    top: 90px;
  }

  button#toVending{
    width: 141px;
    height: 243px;
    left: 203px;
    top: 69px;
  }

  button.vendingOption{
    width: 55px;
    height: 39px;
  }

    button#vendingOption1{
    left: 124px;
    top: 157px;
  }


    button#vendingOption2{
    left: 206px;
    top: 157px;
  }


    button#vendingOption3{
    left: 291px;
    top: 157px;
  }


    button#vendingOption4{
    left: 372px;
    top: 157px;
  }

      button#vendingOption5{
    left: 124px;
    top: 340px;
  }


    button#vendingOption6{
    left: 206px;
    top: 340px;
  }


    button#vendingOption7{
    left: 291px;
    top: 340px;
  }


    button#vendingOption8{
    left: 372px;
    top: 340px;
  }

  button#drinkButton{
    width: 350px;
    height: 130px;
    left: 100px;
    bottom: 43px;
  }





    button#toEntranceFromLobby{
width: 138px;
    height: 268px;
    left: 204px;
    top: 37px;
  }

  /* Lockerroom buttons */

    button#toLobbyFromLockerroom{
width: 106px;
    height: 207px;
    left: 217px;
    top: 69px;
  }

  button#toLockers{
    width: 342px;
    height: 287px;
    left: 144px;
    top: 55px;
  }

    button#locker1button{
    width: 163px;
    height: 332px;
    left: 29px;
    top: 0;
  }
     button#locker2button{
    width: 163px;
    height: 332px;
    left: 194px;
    top: 0;
  }
     button#locker3button{
    width: 163px;
    height: 332px;
    left: 361px;
    top: 0;
  }

  button#clothesButton{
    width: 185px;
    height: 161px;
    left: 173px;
    bottom: 9px;
  }

  button#toLaundry{
    width: 89px;
    height: 117px;
    left: 353px;
    top: 175px;
  }

  button#laundryButton{
    width: 280px;
    height: 205px;
    top: 99px;
    left: 136px;
  }

   button#toSinks{
    width: 331px;
    height: 241px;
    top: 50px;
    left: 109px;
  }

  button#sinkLButton{
width: 54px;
    height: 70px;
    top: 137px;
    left: 110px;
  }

    button#sinkRButton{
      width: 54px;
    height: 70px;
    top: 137px;
    left: 390px;
  }

  button#mirrorButton{
    width: 550px;
    height: 218px;
    top: 0px;
    left: 0px;
  }




  /* Bathhouse buttons */


  button#toShowers{
    width: 388px;
    height: 244px;
    top: 38px;
    left: 81px;
  }

    button#showerHandle{
    width: 120px;
    height: 120px;
    top: 140px;
    left: 215px;
  }


  button#toJacuzzi{
    width: 300px;
    height: 100px;
    top: 189px;
    left: 30px;
  }

  button#jacuzziButton{
    width: 60px;
    height: 60px;
    top: 35px;
    left: 240px;
  }

    button#toColdbath{
    width: 200px;
    height: 100px;
    top: 189px;
    left: 330px;
  }



    button#coldbathPool{
    width: 479px;
    height: 176px;
    top: 189px;
    left: 36px;
  }


     button#toMural{
width: 431px;
    height: 160px;
    top: 0px;
    left: 60px;
  }


     button#muralBg{
    width: 550px;
    height: 289px;
    top: 52px;
    left: 0;
  }

   button#muralSubject{
width: 200px;
    height: 200px;
    top: 97px;
    left: 175px;
  }

   button#muralForegroundL{
    width: 120px;
    height: 248px;
    top: 92px;
    left: 0;
  }

    button#muralForegroundR{
width: 120px;
    height: 248px;
    top: 92px;
    right: 0px;
  }

  button#toSaunaFromBathhouse{
    width: 127px;
    height: 245px;
    top: 50px;
    left: 211px;
  }


  button#toLockerroomFromBathhouse{
    width: 104px;
    height: 208px;
    top: 58px;
    left: 225px;
  }


    button#toBathhouseFromLockerroom{
width: 104px;
    height: 204px;
    top: 69px;
    left: 223px;
  }