/* ----------------------------- */
/* General page styling */
body {
  background-image: url("bedroomBackground.png");
  background-repeat: no-repeat;
  background-size: 150% auto;
  background-color: #f0f0f0;
  height: 60vh;
  margin: 0;
  position: relative;
  background-position: calc(50% + 40px) calc(50% + 90px);
  font-family: Arial, sans-serif;
}

/* Text in the corners */
.corner-text {
  position: absolute;
  font-family: Arial, sans-serif;
  color: black;
}

.top-left {
  top: 20px;
  left: 20px;
}
.image-container {
  width: 700px;  
  left: 40%;        /* desired width */
         /* adjust height as needed */
    /* crop anything outside container */
  position: relative;
  margin: 100px;        /* centers container horizontally */
}

.image-container img {
  width: 100%;           /* scale image to container width */
  height: auto;          /* keep aspect ratio */
  position: absolute;
  bottom: 0;             /* align image to bottom, crops top if needed */
  left: 0;
  top: 0;  
  display: block;             /* ensures image stays aligned inside container */
}        /* align image to the bottom, cutting off the top if needed */

/* Shelf buttons (mirror, photo album, etc.) */
.shelf-button {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: none;
  background: none;
}

/* ----------------------------- */
/* Only the lighter */
#lighterBtn {
  width: 120px;          /* set the displayed width you want */
  height: 120px; 
  top: 95%;      /* adjust vertical position */
  left: 80%;     /* set the displayed height you want */
  object-fit: contain;    /* keeps proportions of PNG/GIF correct */

  z-index: 10;
}

#lighterBtn:hover {
  transform: translate(-50%, -50%) scale(3); /* optional hover growth */
}

/* ----------------------------- */
.textbox {
  display: none;
  position: fixed;   /* use fixed so it stays at top-left even when scrolling */
  top: 20px;         /* distance from the top */
  left: 20px;        /* distance from the left */
  background-color: white;
  padding: 15px;
  border: 0px;
  border-radius: 0px;
  width: 280px;
  text-align: left;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
  font-family: Arial, sans-serif;
  z-index: 9999;     /* ensure it's above everything */
}

.textbox h1 {
  font-size: 20px;
  margin-bottom: 10px;
}
.mirror-container {
  position: absolute;
  top: 44%;        /* vertical placement on page */
  left: 72.5%;     /* horizontal placement on page */
  width: 218px;
  height: 408px;
  transform: translate(-50%, -50%); /* centers it exactly where you set top/left */
  overflow: hidden;
  border-radius: 60% / 50%; /* natural oval mirror shape */
  z-index: 2;
}

.mirror-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(1) saturate(0.6);
  transform: scaleX(1); /* flips image horizontally like a real mirror */
}

.mirror-frame {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  pointer-events: none;
  z-index: 3;
}
.corner-text {
  position: fixed; /* stays in place even when scrolling */
  background-color: white;
  border: 0px solid #444;
  border-radius: 0px;
  padding: 15px;
  width: 280px;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: black;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  text-align: left;
}
/* 👇 Add this directly below — do NOT replace the above */
.corner-text.hidden {
  display: none;
}

.top-left {
  top: 20px;
  left: 20px;
}
.textbox, 
.textbox * {
  font-family: Arial, sans-serif !important;
}