body {
  background-image: url('../imgs/couple_guitar.jpg');
  background-repeat: repeat;
  height: auto;
  
  font-family: "Noto Sans Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 15px;
  color: #d45a18;
}

.header {
  background-color: #EEC288;
  color: #75391c;
  margin: 40px auto;
  padding: 20px;
}

.container{
  background-color: #FFF5DC;
  display: flex;
  flex-direction: column;
 max-width: 1000px;
  width: 70%;
  height: auto;
  margin: 40px auto;
  padding: 40px;
  position: relative;
}

.book_progress{
 
  border: 4px solid #4b3a45;
}

.barra{
  height:24px;
  width:72%;
  background-color: #ee9b24;
  
}

.diary{
  border: 3px dashed #75391c;
  padding: 15px;
}

/* Sidebar de quadros posicionada relativamente ao wrapper */
.sidebar_quadro {
  background-image: url('../imgs/diary/kaguyahime_back.jpg');
  background: cover;
  background-position: center;
  max-width: 700px;
  width: 100%;
  margin: auto; /* Adicionado um pouco de margem para espaçamento */
  display: flex;
  flex-direction: row; /* Coloca os itens em linha */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  justify-content: center;
  flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo se não couberem */
  gap: 20px;
  padding: 15px; /* Adiciona um padding nas laterais */
  border: 8px solid white;
  border-radius: 15px;
}

.sidebar_quadro p {
  color: #75391c;
  background-color: #FFF5DC ;
  width: 100%; /* Faz o parágrafo ocupar a linha inteira, antes dos quadros */
  margin-bottom: 0;
  padding: 5px;
  text-align: center; /* Centraliza o texto */
}

/* Estilo do link que envolve a imagem */
.quadro-link a{
  display: block; /* Essencial para que o link tenha dimensões */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito suave */
}

.sidebar_quadro > img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  cursor: pointer; /* Indica que o elemento é interativo */
}

/* AQUI ESTÁ A SOLUÇÃO */
.sidebar_quadro img {
  /* 1. Definimos uma LARGURA E ALTURA FIXAS para criar a "moldura" */
  width: 200px;
  height: 250px; /* Defina a altura que desejar. Ex: 200px para ser quadrado */

  /* 2. A Mágica: A imagem cobre o espaço sem distorcer */
  object-fit: cover; 

  /* 3. (Opcional) Define qual parte da imagem focar se ela for cortada */
  object-position: center; 
  
  display: block; /* Remove espaços extras abaixo da imagem */
  border: 4px solid white; /* Uma borda para parecer um quadro */
  border-radius: 5px;
  
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

/* O fundo escurecido que cobre a tela inteira */
#zoom-overlay {
  position: fixed; /* Fica fixo na tela, mesmo com rolagem */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Fundo preto com 85% de opacidade */
  
  display: flex; /* Usa flexbox para centralizar a imagem facilmente */
  justify-content: center;
  align-items: center;
  
  z-index: 2000; /* Garante que fique acima de tudo */
  cursor: zoom-out;

  /* Efeito suave de fade-in/fade-out */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#zoom-overlay.visible {/* Classe que torna o overlay visível */
  opacity: 1;
  visibility: visible;
}

/* A imagem dentro do overlay */
#zoom-overlay img {
  display: block;
  max-height: 90vh; /* A imagem nunca será mais alta que 90% da tela */
  
  /* ESTA É A SUA LÓGICA DE TAMANHO PARA PC */
  max-width: 90vw; /* Valor base para telas de celular */
  width: auto;
  
  border: 5px solid white;
  border-radius: 5px;
  
  /* Efeito suave de "pop" na imagem */
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

/* Quando o overlay está visível, a imagem cresce para o tamanho normal */
#zoom-overlay.visible img {
  transform: scale(1);
}

#drawing{
  object-position: -8px 1px;
}

footer{
  max-width: 700px;
  width: 100%;
  margin: 15px auto;
  padding: 15px;
  background-color: #FFF5DC;
}

/* ==== Responsividade ==== */
@media (max-width: 768px) {
  
  body{
    background-position: center;

  }
  
  .container {
    flex-direction: column;
  }

}