body {
  background: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

.top-left-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-family: Georgia, 'Times New Roman', serif;
  text-align: left;
  z-index: 5;
}

.top-left-text h1 {
  margin: 0;
  font-size: 2em;
}

.top-left-text p {
  margin: 0.2em 0;
  font-size: 1em;
}

.bottom-left-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-family: Georgia, 'Times New Roman', serif;
  text-align: left;
  z-index: 5;
}

.bottom-left-text h2 {
  margin: 0;
  font-size: 1.5em;
}

.bottom-left-text p {
  margin: 0.2em 0;
  font-size: 1em;
}


.viewfinder {
  position: absolute;
  top: 26.1%;
  right: 54.7%;
  width: 9%;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(0,0,0,0.2);
  z-index: 0;
  transform: translateY(0%); /* keeps it vertically aligned */
}

.viewfinder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: blur(4px);

}

.camera {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}

/* NEW: This wrapper hugs the image tightly */
.camera-content {
  position: relative;
  
  /* THIS IS THE KEY FIX: Replace 1500 / 1000 with your image's Width / Height */
  aspect-ratio: 1192 / 899; 
  
  /* Scale logic: Grow until you hit screen width OR screen height */
  height: auto;
  width: auto;
  
  /* Constraints */
  max-width: 100vw;
  max-height: 100vh;
  
  /* Center it */
  margin: 0 auto;
}

/* Update the camera image to drive the size of the wrapper */
.camera-base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures it perfectly fills the aspect-ratio box */
  z-index: 2;
}

.lcd {
  position: absolute;
  top: 50.5%;
  left: 14.5%;
  width: 43%;
  aspect-ratio: 3/2; /* adjust this to match your lcd image's actual ratio */
  overflow: hidden;
  background: black;
  border-radius: 6px;
  z-index: 3;
  transform: translateY(-0%); /* vertically centers the box */
}

.lcd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 28px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  z-index: 4;
}

.prev { left: 6px; touch-action: manipulation; }
.next { right: 6px; touch-action: manipulation; }

.nav:hover {
  background: rgba(255,255,255,0.2);
}


.fade {
  transition: opacity 0.25s ease;
}