body {
    background-color: #ccc;
    color: #000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    padding-left: 220px; /* Espaço para o menu flutuante */
}

header {
    padding: 10px 20px; /* Ajuste conforme necessário */
    /* Se quiser que o header não seja afetado pelo padding-left do body,
       você pode posicioná-lo de forma absoluta ou fixa,
       ou ajustar o padding-left do body e o width do menu. */
}

header h1 {
    color: #000;
    text-transform: uppercase;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2em;
    margin: 0; /* Removido margin-top e margin-bottom para melhor controle no header */
}

.floating-menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px; /* Largura do menu */
    height: 100vh; /* Altura total da viewport */
    background-color: #f0f0f0; /* Cor de fundo do menu */
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para empurrar os ícones sociais para baixo */
}

.floating-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.floating-menu ul li {
    margin-bottom: 10px;
}

.floating-menu h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em; /* Tamanho da fonte para os itens do menu */
}

.floating-menu h3 a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px 0;
}

.floating-menu h3 a:hover {
    color: #0077b5; /* Azul para hover nos links do menu */
}

.social-links {
    padding-top: 20px; /* Espaço acima dos ícones sociais */
    border-top: 1px solid #ddd; /* Linha separadora opcional */
    text-align: center; /* Centralizar ícones se houver mais espaço */
}

.social-icon {
    font-size: 1.5em; /* Tamanho dos placeholders de ícone */
    color: #000000; /* Cor inicial preta */
    text-decoration: none;
    margin: 0 10px; /* Espaçamento entre os ícones */
    transition: color 0.3s ease; /* Transição suave da cor */
}

.social-icon:hover,
.social-icon:focus,
.social-icon:active {
    color: #0077b5; /* Cor azul no hover, focus e active */
}

/* Estilo para as seções de conteúdo, para navegação com âncoras */
main {
    padding: 20px;
}

section {
    padding-top: 60px; /* Offset para a altura do header fixo, se você tiver um */
    margin-top: -60px; /* Compensa o padding-top para que a âncora pule para o lugar certo */
    margin-bottom: 20px;
}