* {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family: "myFont", Verdana, Tahoma;
  cursor: url("assets/Interior/Foremal/cursor5.png"), auto;
  }

  body {
    background: url("assets/backgrounddd.png");
  }

  #megaContainer {
    width: 640px;
    height: 640px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

#scene_img {
  display: flex;
  width: 640px;
  height: 640px;
  border-radius: 3px;
 }

.hidden {
  display: none;
}

input,textarea{
outline:none
}


button,input[type="submit"]{
outline:none;
border:none;
}

button:hover,input[type="submit"]{
  cursor:pointer;
  transform: translateY(-0.25em);
  }

li,a{
  text-decoration:none;
  }

area:active {
  cursor: url("assets/Interior/Foremal/icons8-magnifying-glass-tilted-left-48.png"), auto;
}

area {
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#itemPickUpIcon {
  position: absolute;
  bottom: 35px;
  left: 490px;
  border: 3px solid green;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  display: none;
}

/* FRAMES */

#borderFrame {
    position: absolute;
    bottom: -48px;
    left: -46px;
    width: 735.5px;
    height: 735px;
    border-radius: 15px;
  }

#borderFrameMainMenu {
    position: absolute;
    bottom: -48px;
    left: -46px;
    width: 737px;
    height: 735px;
    border-radius: 15px;
  }

#borderFrameOpenedChest {
    position: absolute;
    bottom: -48px;
    left: -46px;
    width: 731.5px;
    height: 735px;
    border-radius: 15px;
  }


/* MAIN MENU */

 #bannerContainer {
  display: flex;
  position:relative;
  bottom: 270px;
  right: px;
 }

 #bannerImg {
  position:absolute;
  width: 650px;
  height: 200px;
 }

 #bannerImgText {
  position: absolute;
  color: black;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2rem;
  font-family: Pixelify Sans, sans-serif, Arial;
  top: 40px;
  left: 125px;
  width: 440px;
 }

#newgame_btn {
  background-color: rgb(0, 255, 8);
  background: none;

}

#newgame_btn:focus {
  outline: none;

}

#load_btn {
  background-color: rgb(176, 3, 176);
  background: none;

}

#load_btn:focus{
  outline: none;
}

#exit_btn {
  background-color: rgb(0, 195, 255);
  background: none;
}

#exit_btn:focus{
  outline: none;
}

.btn-group-vertical {
 position: relative;
 top: 65%;
 left: 33%;
 gap: 20px;
 height: 160px;
}

.btn-group-vertical button {
  height: 45px;
  width: 250px;
  color: white;
  text-shadow: 5px 5px 5px rgb(0, 208, 255);
  font-size: 27px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#borderFrameMainMenu {
    position: absolute;
    bottom: -48px;
    left: -46px;
    width: 737px;
    height: 735px;
    border-radius: 15px;
  }

#menu_container {
  height: 100%;
  max-height: 640px;
  max-width: 640px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 0px;
  display: flex;
  border-radius: 5px;
}

/* FIRST SCENE  */

 #firstSceneContainer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
}


/* PAINTING SCENE */

#painting {
    width: 640px;
    height: 640px;
  }

 #paintingContainer {
  display: flex;
  width: 640px;
  height: 640px;
 }

 #backBtnPainting {
  position:relative;
  right: 640px;
  width: 75px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

/* DRAWER KEY */

#drawerKeySceneContainer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
}

#insideKeyDrawer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
}

/* DRAWER NOTE */

 #noteDrawerContainer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
 }

/* HALLWAY / SECOND SCENE */

 #hallwayContainer {
    position: relative;
    max-width: 640px;
    max-height: 640px;
 }

#hallwayDoor {
  position: relative;
  width: 110px;
  height: 180px;
  bottom: 490px;
  left: 300px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

/* GOLD ROOM */

 #goldRoomContainer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
 }

#closed_chest_img {
  position: relative;
  max-width: 640px;
  max-height: 640px;
  border-radius: 5px;
 }

#combinationLock {
  position: relative;
  left: 210px;
  bottom: 265px;
  width: 70px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(-10deg);
}

/* COMBINATION LOCK SCENE */

#combinationSceneContainer {
    display: flex;
    position: relative;
    width: 640px;
    height: 640px;
}

#combinationLockImage {
  position: absolute;
  width: 640px;
  height: 640px;
}

#combinationContainer {
  position: relative;
  display: flex;
  height: 200px;
  width: 500px;
  top: 370px;
  left: 13px;
}

#combinationContainer div {
  width: 150px;
}

.digits {
  color: white;
  font-size: 10rem;
  padding: 0;
  margin: 0;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#combinationLock:hover {
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

/* OPENED CHEST SCENE */

#openedChestContainer {
  display: flex;
  position: relative;
  width: 640px;
  height: 640px;
}


/* LAST DOOR SCENE */

#mainDoorContainer {
  position: relative;
  max-width: 640px;
  max-height: 640px;
}

.trollImg {
  position: relative;
  bottom: 300px;
  left: 240px;
  width: 150px;
}

/* BARREL SCENE */

 #barrelKey {
    display: flex;
    width: 640px;
    height: 640px;
    border-radius: 3px;
  }

#barrelSceneContainer {
    position: absolute;
    max-width: 640px;
    max-height: 640px;
  }


/* BACKPACK & INVENTORY */

#backPackContainer {
display: flex;
position: relative;
justify-content: flex-end;
bottom: 102px;
left: 542px;
width: 100px;
}

#backpack {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#backpackOpen {
    display: none;
  }

#backPackContainerOpenedChest {
  display: flex;
  position: relative;
  top: 538px;
  right: 147px;  
  height: 100px;
 }

#backPackContainerGoldRoom {
  display: flex;
  position: relative;
  justify-content: flex-end;
  bottom: 178px; 
  left: 542px;
  width: 100px;
}

#backPackContainerNote {
  display: flex;
  position: relative;
  top: 500px;
  right: 100px;
  height: 100px;
 }

#backPackContainerHallway {
  display: flex;
  position: fixed;
  bottom: 2px;
  left: 542px;
  width: 100px;
  }

#backPackContainerMainDoor {
  display: flex;
  position: relative;
  justify-content: flex-end;
  bottom: 175px;
  left: 542px;
  width: 100px;
  }

#backPackContainerBarrel {
  display: flex;
  position: relative;
  justify-content: flex-end;
  bottom: 178px; 
  left: 542px;
  width: 100px;
}

 #inventoryContainer{
  flex-direction: column-reverse;
  position: absolute;
  top: 46%;
  right: 1%;
  display: none;
  margin: 0;
  width: 65px;
  height: 250px;
}

.inventoryIcons {
  position: relative;
  border: 3px solid rgb(85, 163, 78);
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 45px;
  display: none;
}

#inventoryContainerBarrel{
  position: absolute;
  top: 46%;
  right: 41%;
  display: none;
  margin: 0;
  width: 65px;
}


/* BACK BUTTONS */

#backBtn {
position:relative;
left: -10px;
bottom: 739px;
width: 70px;
height: 70px;
cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
transform: rotateY(45deg);
}

#backBtnPainting {
  position:relative;
  right: 640px;
  width: 75px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#backBtnHallway {
  position:relative;
  left: -10px;
  bottom: 749px;
  width: 70px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
  transform: rotateY(45deg);
 }

 #backBtnBarrel {
    position:relative;
    left: -10px;
    bottom: 643px;
    width: 70px;
    height: 70px;
    cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
    transform: rotateY(45deg);
  }


  #backBtnMainDoor {
    position:relative;
    left: -10px;
    bottom: 639px;
    width: 70px;
    height: 70px;
    cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
    transform: rotateY(45deg);
  }

#backBtnGoldRoom {
  position:relative;
  left: -10px;
  bottom: 643px;
  width: 70px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
  transform: rotateY(45deg);
}

#backBtnLastScene {
  position:relative;
  right: 178px;
  bottom: 745px;
  width: 70px;
  height: 70px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
  transform: rotateY(45deg);
}

#backBtnOpenedChest {
  position:relative;
  right: 635px;
  height: 75px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#backBtnLock {
position:relative;
left:-10px;
bottom: px;
width: 70px;
height: 70px;
cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
transform: rotateY(45deg);
}


/* DIALOGBOX */

#talkingHead {
  position: relative;
  bottom: -8px;
  right: 100px;
  width: 80px;
  height: 78px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#dialogBoxContainer {
  position: relative;
  width: 470px;
  bottom: 270px;
  display: none;
}

#dialogBox {
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 3px;
  width: 470px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogX {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 360px;
  bottom: 70px;
  width: 20px;
  height: 20px;
}

#dialogText {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 25px;
  bottom: 15px;
  width: 285px;
  font-size: 18px;
  line-height: 1.15rem;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogBoxContainerHallway {
  display: none;
  position: relative;
  width: 470px;
  bottom: 270px;
 }

#dialogBoxHallway {
  position: absolute;
  bottom: -9px;
  left: 2px;
  width: 400px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#dialogTextHallway {
  position: absolute;
  bottom: 6px;
  left: 30px;
  width: 275px;
  line-height: 1.1rem;
  font-size: 19px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#talkingHeadHallway {
  position: relative;
  bottom: 2px;
  left: 302px;
  width: 68px;
  height: 78px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#dialogBoxContainerGoldRoom {
  display: none;
  position: relative;
  width: 470px;
  bottom: 279px;
}

#dialogBoxGoldRoom {
  margin: 0;
  padding: 0;
  position: relative;
  width: 470px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogTextGoldRoom {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 20px;
 bottom: 15px;
  width: 285px;
  font-size: 20px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#talkingHeadGoldRoom {
  position: relative;
  bottom:-11px;
  right: 100px;
  width: 80px;
  height: 78px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogBoxKey1Container {
  display: none;
  position: relative;
  width: 470px;
  bottom: 270px;
}

#dialogBoxKey1 {
  position: absolute;
  bottom: -10px;
  width: 470px;
  height: 100px;
  display: none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}


#key1DialogText {
  position: absolute;
  bottom: 6px;
  left: 30px;
  width: 340px;
  font-size: 20px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  display: none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;

}

 #talkingHeadKeyDrawer {
  position: relative;
  bottom: 1px;
  left: 355px;
  width: 80px;
  height: 78px;
  display: none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#dialogBoxNoteContainer {
  position: absolute;
  width: 470px;
  height: 100px;
  top:540px;
  display: none;
}

#dialogBoxNote {
  position: absolute;
  width: 470px;
  height: 100px;
  display: none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#noteDialogText {
  position: absolute;
  bottom: 15px;
  left: 27px;
  width: 320px;
  font-size: 20px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  display: none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#talkingHeadNoteDrawer {
  position: relative;
  bottom:-11px;
  left: 350px;
  width: 80px;
  height: 78px;
  display:none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
 }

#dialogBoxMainDoorContainer {
  position: relative;
  width: 470px;
  bottom: 270px;
  display: none;
}

#dialogBoxMainDoor {
  position: fixed;
  bottom: 515px;
  width: 470px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogTextMainDoor {
  position: absolute;
  bottom: 15px;
  left: 30px;
  width: 275px;
  font-size: 22px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;

}

#dialogBoxContainerBarrel {
  display: flex;
  position: relative;
  width: 400px;
  bottom: 270px;
  left: 2px;
  display: none;
}

#dialogBoxBarrelKey {
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 9px;
  width: 400px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#talkingHeadBarrel {
  position: absolute;
  bottom: 20px;
  left: 300px;
  width: 68px;
  height: 78px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogTextBarrelKey {
  position: absolute;
  bottom:35px;
  left:30px;
  width:250px;
  font-size:22px;
  color:black;
  font-family:Pixelify Sans, sans-serif, Arial;
  font-weight:900;
  display:none;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}

#dialogBoxContainerOpenedChest {
  display: none;
  position: absolute;
  width: 400px;
  height: 100px;
  top: 537px;
}


#dialogBoxOpenedChest {
  position: absolute;
  width: 402px;
  height: 100px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;

}

#dialogTextOpenedChest {
  position: absolute;
  top: 15px;
  left: 22px;
  width: 255px;
  font-size: 20px;
  color: black;
  font-family: Pixelify Sans, sans-serif, Arial;
  font-weight: 900;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;

}

#talkingHeadOpenedChest {
  position: absolute;
  top: 11px;
  right:30px;
  width: 68px;
  height: 78px;
  cursor: url("assets/Interior/Foremal/cursorfinito.png"), auto;
}