/* style.css */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    display: flex; /* Usamos flexbox para layout de cabeçalho/main/rodapé */
    flex-direction: column; /* Coloca os itens em coluna */
    min-height: 100vh; /* Faz o body ocupar 100% da altura da viewport */
    background-image: url(fotosE_Midias/fundo_mouse_teclado.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right ;
}

 h1{
   
    font-size: 25px;
    padding: 0 20px;
    

 }   


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   /* flex-shrink: 0;  Impede que o cabeçalho encolha */
    border-bottom: 2px solid white;
}


.menu{
   
    list-style-type: none;
    text-align: right;
    margin: 0;
    padding: 0;
    display: flex;
  
    
}
.menu li{
    display: inline-block;
    padding: 15px 20px;
    
}
.menu a{
    list-style-type: none;
    color: #afacb0;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    background-color:#2c3e50;
    padding: 12px  20px;
    border-radius: 25px;
    border: 2px solid #afacb0;
    
}
.menu li a:hover{
    color: white;
     border: 2px solid white;


}


#conteudo-principal {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin: 20px auto;
    padding: 20px;
   /* max-width: 500px;  Largura máxima da sua caixa */
   width: 80%;
    flex-grow: 1; /* Faz a main ocupar o espaço restante verticalmente */

    /* ----- PROPRIEDADES CHAVE PARA O SCROLL INTERNO ----- */
    height: 60vh; /* Define uma altura fixa para a main (60% da altura da viewport) */
                  /* Você pode usar pixels (ex: 400px) se preferir uma altura exata */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical APENAS dentro da main, se o conteúdo exceder a altura definida */
    /* --------------------------------------------------- */
   
}

#conteudo-principal h3 {
    color: #3498db;
    margin-top: 15px;
     font-size: 25px;
}
#conteudo-principal h2{
    color:#5d8aa8;
     margin-top: 15px;
     font-size: 30px;
}

#conteudo-principal p {
    line-height: 1.6;
    margin-bottom: 10px;
     font-size: 20px;
     text-indent: 25px;
}

footer {
    background-color: #7f8c8d;
    color: white;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0; /* Impede que o rodapé encolha */
    border-top: 2px solid white;
}
img{
    width: 500px;
   
}
.foto-pequena{
    width: 80px;
}

@media screen and (max-width: 1000px){
   .menu a{
    padding: 8px 12px;
    font-size: 14px;
   }
   #conteudo-principal{
    width: 90%;
   }
    header{
    flex-direction: column;
    align-items: center;
}
  }

@media screen and (max-width: 550px){
    
   img{width: 300px;}
   #conteudo-principal p{
    font-size: 16px;
    
   }
   #conteudo-principal h2{
    font-size: 25px;
   }
   #conteudo-principal h3{
    font-size: 20px;
   }
   .menu li{
   
    padding: 15px 4px;
    
   }
   

   header{
    flex-direction: column;
    align-items: center;
   }
  
  
   }