@charset "utf-8";
/* CSS Document */

body {background-color: #1F1F1F; color: #fff; padding: 5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 960px; }

hr {border: 0px; height: 2px; background-color: #000; text-align: center;}

a:link {color: #fff; text-decoration: none;}
a:visited {color: #fff; text-decoration: none;}

#titulo {position: relative; height: 30px; background-color: #000; padding: 10px; text-align: left; color: #fff; font-family: arial; font-size: 20pt;}
	
#rodape {position: relative; height: 30px; background-color: #000; padding: 10px; text-align: left; color: #fff; font-family: arial; font-size: 16pt;}

#nome {width: 40%; text-align: left; float: left; border: 0px; text-wrap: none;}

#arroba {width: 40%; text-align: right; float: right; border: 0px; text-wrap: none;}
	#arroba img {width: 25px;}

#tit {position: relative; width: 95%; height: 55px; border: 1px solid fff; }
#tit img {vertical-align: middle;}



/* ESTILOS DE LIVROS */

#sinopse {text-align: justify;}

.img {float: left; padding-right: 15px;}



/* ESTILOS DE MÚSICAS */

.mus_titulo {font-size: 16pt; color: #55cc55; }

#mus1 {width: 47%; text-align: left; float: left; border: 0px; text-wrap: none;}

#mus2 {width: 47%; text-align: left; float: right; border: 0px; text-wrap: none;}

a.yt {color: red; font-size: 12pt; font-style: italic; }






/* MENU E PAINEL */

/* Container Principal */
.tab-container {
  max-width: 900px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  border: 2px solid #000;
  overflow: hidden;
}

/* Menu de Abas (Flexbox Responsivo) */
.tab-menu {
  display: flex;
  flex-wrap: wrap; /* Vai para baixo se a janela for muito estreita */
  background-color: #111;
  border-bottom: 2px solid #000;
}

/* Links do Menu estilizados como botões */
.tab-btn {
  flex: 1 1 150px; /* Divide espaço equally; quebra linha se < 150px */
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  font-size: 16pt;
  box-sizing: border-box;
  transition: background-color 0.3s;
}

.tab-btn:hover {
  background-color: #000;
}

/* Área dos Painéis */
.tab-content {
  padding: 0px 20px;
  max-height: 500px; /* Define o limite máximo de altura */
  overflow-y: auto;  /* Scrollbar vertical só se precisar */
}

.tab-content a:hover {text-decoration: underline;}

.tab-content::-webkit-scrollbar {  width: 15px; }
.tab-content::-webkit-scrollbar-track { background: #111111; }
.tab-content::-webkit-scrollbar-thumb {background: #000; }

/* Esconde todos os painéis por padrão */
.panel {
  display: none;
}

.default-panel h2 img {vertical-align: middle;}
.panel h2 img {vertical-align: middle;}

/* Exibe o painel correspondente à âncora clicada */
.panel:target {
  display: block;
}

/* Oculta o painel padrão quando qualquer um dos outros estiver ativo */
.panel:target ~ .default-panel,
.tab-content:has(.panel:target) .default-panel {
  display: none;
}
.tab-container:has(#painel0:target) .tab-menu .tab-btn[href="#painel0"],
.tab-container:has(#livros:target) .tab-menu .tab-btn[href="#livros"],
.tab-container:has(#musica:target) .tab-menu .tab-btn[href="#musica"],
.tab-container:has(#reflexoes:target) .tab-menu .tab-btn[href="#reflexoes"] {
  background-color: #777;
  color: #000;
}