/* Make the background fill the whole site */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background: url("https://harrowick.neocities.org/Lore/websitelorehomepagePrototype.png") no-repeat center center fixed;
  background-size: cover; /* ensures it scales to full screen */
}
/* "Lore Homepage" title */
header {
  position: absolute; /* lets it sit above background */
  top: 0px;
  left: 500px;
  z-index: 3;
}

.title-img {
  max-width: 957px; /* adjust as needed */
  height: auto;
}

/*Return Home Button*/
.home-btn {
  position: fixed;
  cursor: pointer;
  z-index: 5;
  filter: brightness(0.8) contrast(0.9);
  transition: filter 0.3s ease, transform 2s ease;
}
.home-btn:hover {
  filter: brightness(1) contrast(1);
}
.hidden-home {
  transform: translateX(-100%);
}




/*code for the "candles" button! */

.candles-btn {
  position: fixed;
  top: 170px;
  left: 0px;
  height: auto;
  cursor: pointer;
  z-index: 5;
  filter: brightness(0.8) contrast(0.9);
  transition: filter 0.3s ease, transform 2s ease;
}
.candles-btn:hover {
  filter: brightness(1) contrast(1);
}
.hidden-candles {
  transform: translateX(-100%);
}



/*entities button */

.entities-btn {
  position: fixed;
  top: 175px;
  left: 470px;
  cursor: pointer;
  z-index: 5;
  filter: brightness(0.8) contrast(0.9);
  transition: filter 0.3s ease, transform 2s ease;
}
.entities-btn:hover {
  filter: brightness(1) contrast(1);
}
.hidden-entities {
  transform: translateX(-100%);
}





/*locations button */

.locations-btn {
  position: fixed;
  top: 200px;
  left: 970px;
  cursor: pointer;
  z-index: 5;
  filter: brightness(0.8) contrast(0.9);
  transition: filter 0.3s ease, transform 2s ease;
}
.locations-btn:hover {
  filter: brightness(1) contrast(1);
}
.hidden-locations {
  transform: translateX(-100%);
}


/*items button */

.items-btn {
  position: fixed;
  top: 210px;
  left: 1400px;
  cursor: pointer;
  z-index: 5;
  filter: brightness(0.8) contrast(0.9);
  transition: filter 0.3s ease, transform 2s ease;
}
.items-btn:hover {
  filter: brightness(1) contrast(1);
}
.hidden-items {
  transform: translateX(-100%);
}



   

/* this tells the sidebar to go to -100% X, basically moving it offscreen to the left! */
.hidden {
  transform: translateX(-100%);
}