*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:  "Cinzel" sans-serif;}

body {
width: 100%;
height: 100%;
}

p {
text-indent: 40px;
padding-bottom: 10px;
}

body::before {
  content: "";
  background: url(imagens/background_criancas.png) no-repeat center center/cover;
  position: fixed; /* fixa na tela toda */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: -1;
}

.botoes {
  display: none;
}

.navbar {
position: fixed;
overflow: hidden;
width: 100%;
height: 160px;
padding: 5px 15px;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 5;

}

.navbar .logo {
display: flex;
align-items: center;}

.navbar .logo img{
width: 80px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
cursor: pointer;}

.navbar .titulo img {
width: 50%;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 310px
}

.navbar .direita .direto {
display: flex;
width: 100%;
margin-right: 50px;
margin-left: 20px;
}

.navbar .direita .direto li{
text-decoration: none;
list-style: none;
padding-left: 20px;
margin-right: 20px;
font-size: 20px;
}

.navbar .direita .direto li a {
text-decoration: none;
color: black;
}

.navbar .direita .direto li:hover {
transform: scale(1.2);	
}

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0px;
  top: 150px;
  width: 240px;
  height: calc(100% - 130px); /* ocupa toda a altura disponível */
  padding-right: 10px;
  color: rgba(255,255,255, 0.8);
}

.sidebar .links {

padding-bottom: 15px;
}


.sidebar .links .icon {
display: flex;
align-items: center;
padding: 30px 24px;
height: 50px;
cursor: pointer;}

.sidebar .links .icon:hover{
background: rgb(244, 233, 233);}

.sidebar .links .icon a{
text-decoration: none;
color: black;
display: flex;
align-items: center;
font-size: 20px;
font-weight: 1000;

}

.sidebar .links .icon a:hover {
transform: scale(1.2);	
}


.sidebar .links .icon img{
 width: 50px;
 margin: 15px 15px 15px 0px;
 cursor: pointer;
 transition: 0.3s;
}

.sidebar .links .icon img:hover{
transform: scale(1.2);
}
.sidebar .logo_alemanhando{
margin-top: auto;
}

.sidebar .logo img{
width: 130px;
margin-left: 30px;
margin-bottom: 40px;
opacity: 0.6;
cursor: pointer;}

.content {
  position: fixed;
  display: flex;              
  top: 170px;
  left: 240px;
  width: calc(100% - 240px);
  height: calc(100vh - 150px);
  overflow-y: auto;
  gap: 10px;     
   
}

.caixa{
  padding-top: 10px;
  width: 90%;
  height: 90%;
  border: 1px solid black;
  background-color: rgba(255,255,255, 0.4);
  
}

.caixa h1{
text-align: center;
padding: 10px;
}
.caixa h3{
text-align: justify;
padding: 10px;
line-height: 1.5;
}

.caixa .brasao{
  
  display: block;
  padding: 10px;
}

.caixa .brasao img {
  float: left;
  width: 20%;
  height: auto;
  margin-right: 15px;
}

.caixa .brasao h3{
  text-align: justify;
  padding: 10px;
}
@media screen and (max-width: 1200px){
  .navbar {
    display: none;
  }

  .sidebar.ativo {
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }


  .sidebar {
display: none;

  }

  .content {
  position: relative;   /* ← tira o fixo */
  padding-bottom: 120px;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column; /* ← empilha */
  align-items: center;
  gap: 10px;
  overflow: visible; /* evita conflito de rolagem */
  }
  .caixa,
  .caixa.brasao { 
     flex: none;              /* ← MUITO IMPORTANTE */
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  }



  .botoes {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
 
}

.botao {
  padding: 10px;              /* espaçamento interno */
  background-color: red;      /* cor de fundo */
  color: white;               /* cor da fonte */
  border: none;               /* remove borda padrão */
  border-radius: 5px;         /* cantos arredondados (opcional) */
  cursor: pointer;            /* cursor de mão */
  margin-right: 10px;         /* aproxima da margem direita */
}
}