html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background-color: black;
}

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#tent-click-area {
    position: absolute;
    top: 80%;    /* Slightly higher */
    left: 85%;   /* Move left */
    width: 100px;  
    height: 220px; /* Slightly taller */
    display: block;
    cursor: pointer;
    z-index: 5;
}

#journal {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.5s ease;
}

#journal-container {
  display: none;
  position: absolute !important;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 100%;
  z-index: 3;
}


#page-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

#journal-page {
  width: 100%;
  display: block;
}

#polaroid-link-1,
#polaroid-link-2,
#polaroid-link-3,
#polaroid-link-4,
#polaroid-link-5,
#polaroid-link-6,
#polaroid-link-7 {
  position: absolute;
  display: none;
  z-index: 6;
  pointer-events: auto;
}



#polaroid-link-1 {
  top: 20%;  
  left: 65%;
  width: 20%;
  height: 30%;
}


#polaroid-link-2 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}


#polaroid-link-3 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}


#polaroid-link-4 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}


#polaroid-link-5 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}

#polaroid-link-6 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}

#polaroid-link-7 {
  top: 20%;
  left: 65%;
  width: 20%;
  height: 30%;
}

#nav-left,
#nav-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
  z-index: 4;
  pointer-events: auto; 
}


#nav-left {
  left: 0;
}

#nav-right {
  right: 0;
}