/* RESET BASICO */


/* CORPO DA PÁGINA */
body {
  background-size: 350px;   /* cobre toda a tela */
  background-repeat: repeat;
  background-attachment: fixed; /* efeito de paralaxe, opcional */
  background-image: url("img/fundo.jpg");
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #111; /* fundo escuro pra vibe screamo/sk8 */
  color: #eee; /* texto claro */
  line-height: 1.5;
  margin: 0px;
  
}
#mural{
  position:relative;
  width:100px;
  
  }
.muralcolagem{
  position:absolute;
  }
  
#foto1{
  width: 270px;
  left:230px;
  top:136px;}
  
#foto2{
  width:200px;
  left:600px;
  top:200px;
  
  
  }
  #foto3{
  width: 170px;
  left:40px;
  top:150px;
  transform:  rotate( 9deg);
  
  }#foto4{
  width: 430px;
  left:900px;
  top:136px;
  
  
  }#foto5{
  width: 400px;
  left:500px;
  top:200px;
  
  
  }#foto6{
  width: 40px;
  left:30px;
  top:200px;
  
  
  }#foto7{
  width: 40px;
  left:30px;
  top:200px;
  
  
  }#foto8{
  width: 40px;
  left:30px;
  top:200px;
  
  
  }#foto9{
  width: 40px;
  left:30px;
  top:200px;
  
  
  }#foto10{
  width: 40px;
  left:30px;
  top:200px;
  
  
  }
/* HEADER */
header {
  background-color: black;
  padding-top: 100px;
  border-bottom: 2px solid #555;
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: center;
}

#titulo{
  position:relative;
  }/* TITULO PRINCIPAL */
header h1 {
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  top: 10px;
  font-size: 3rem;
  font-weight: 900;
  font-family: 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 2px;
  color: #e22; /* vermelho sangue */
  background-color:#000;
  margin-top:10px;
  padding:6px 12px;
}
section > *:not(h2) {
  
background-color: black;
  color: white;
  padding: 2px 6px;
  display: inline-block;
  margin: 20px auto 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  font-style: italic;
  transform: rotate(1.5deg);
}


 nav{
   display: flex; justify-content: space-between;
   } 
/* NAVEGAÇÃO PRINCIPAL */
nav a {
  color: #eee;
  text-decoration: none;
  margin-right: 15px;
  font-weight: 700;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #e22;
}

/* SEÇÕES */
section h2 {
  position: relative;
  background-color: black;
  color: white;
  padding: 2px 6px;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  font-weight: 900;
  font-size: 1.6rem;
  transform: rotate(-1.5deg);
  margin: 0 auto;
  top: 0;


}

 
 section {
    margin-top: 400px;
   position:relative;
  margin-bottom: 40px;
  text-align: center;
}

/* MENU DE TEMAS (lista estilizada) */
.menu-tema ul {
  list-style: none;
  padding-left: 0;
}

.menu-tema li {
  margin-bottom: 12px;
}

.menu-tema button {
  background: none;
  border: none;
  color: #eee;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-tema .bolinha {
  width: 14px;
  height: 14px;
  background-color: #e22;
  border-radius: 50%;
  flex-shrink: 0;
}

/* CONTEÚDO DOS TEMAS - só mostra quando display:block */
.tema-conteudo {
  display: none;
  padding-left: 20px;
  border-left: 3px solid #e22;
  margin-top: 15px;
}

/* TÍTULOS DENTRO DAS DIVS DE CONTEÚDO */
.tema-conteudo h3 {
  margin-bottom: 10px;
  font-weight: 900;
  font-size: 1.3rem;
  color: #fff;
}

.nav-direita{
  margin-right: 180px;
  }
.nav-esquerda{
  margin-left: 20px;
  }