body {
  background-image: url('images/background.png');
  background-size: auto 100%;
  background-position: center center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.media-nav {
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.6rem;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.8);
  width: 12vw;
}

.media-nav a {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  color: #111;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}

.media-nav a:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}


.house {
  background-image: url('images/window.png');
  background-size: 100%;
  background-position: center bottom;
  height: 100%;
  width: 100%;
  background-size: cover;
}

.choices {
  display: flex;
  flex-direction: column;
  height: 80vh;
  overflow-y: auto;
  width: 12vw;
  padding: 1vw;
  background: rgba(255, 255, 255, 0.5);
  text-align: center; 
}

.choices img {
  width: 12vw;
  margin-top: 3vh;
  cursor: pointer;      
}

.Music {
  display: flex;
  flex-direction: row;
  width: 80vw;
  height: 80vh;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 10vh;
  margin-bottom: 10vh;
}

p {
	font-size: 1.5vw;
	color: black;
	font-weight:100;
	font-family: 'Courier New', monospace;
	padding:0.2vw;
	border-radius:15px;
	background: rgb(255,255,255,0.7);
}


.chosen {
  margin-left: 5vw;
  height: 83vh;
  width: 55vw;
  position: relative;
  overflow: hidden;      
}

.cd-player {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 45vw;
}

.corner-button {
  position: fixed;       
  left: 1rem;
  top: 1rem;
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  border: 1px solid #222;
  color: #111;
  text-decoration: none;
  font: inherit;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: background .15s ease, transform .05s ease;
}


.chosen .art{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 10vw;           
  max-height: 55vh;
  object-fit: contain;
  pointer-events: none;  
}

.outline {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 16vw;
  max-height: 55vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art {
  width: 100%;
  max-height: 30vh;
  object-fit: contain;
  pointer-events: none;
}

.book-info {
  display: none;   /* start hidden */
}
.book-info.active {
  display: block;  
}

.book-info {
  position: absolute;
  right: 30%;
  bottom: 30%;
  max-width: 17vw;
  background: rgba(255,255,255,0.85);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.book-info h2 {
  margin: 0 0 0.4rem;
  font: 600 1.2rem/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.book-info p {
  margin: 0;
  font: 400 0.95rem/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

