/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    
    background-image: url("https://mysky.neocities.org/images/ceu.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #000000;
    
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Faz os itens ficarem um embaixo do outro */
    align-items: center;    /* Centraliza o banner e o wrapper */
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    gap: 20px;
}

.banner-topo {
    width: 100%;
    max-width: 1420px; /* Mesma largura do main-wrapper */
    height: 250px;      /* Defina a altura que desejar para o banner */
    overflow: hidden;   /* Garante que a imagem não saia das bordas */
}

.banner-topo img {
    width: 100%;        /* Faz a imagem ocupar toda a largura */
    height: 100%;       /* Faz a imagem ocupar toda a altura */
    object-fit: scale-down;  /* Ajuste inteligente: não distorce a imagem */
    display: block;
}

.main-wrapper {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    /* Removemos o height fixo para ele se adaptar ao conteúdo */
}


.sidebar-container {
    display: flex;
    flex-direction: column; /* Faz uma ficar embaixo da outra */
    gap: 20px;              /* Espaço entre a sidebar 1 e a 2 */       
}

/* Ajuste na classe .sidebar (se necessário) */
.sidebar {
    width: 170px;
    height: auto;
    /* A sidebar vai esticar para acompanhar a altura do conteúdo à direita */
    background-color: #000000;
    color: white;
    padding: 20px;
    border: 2px solid white;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    text-align: center;
}

.sidebar h1 {
    font-size: 1.4em;
    line-height: 1.4;
}


.sidebar a {
    font-size: 1.3em;
    line-height: 1.4;
    color: white;
}

.right-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
}

.top-box {
    width: 100%;
    background-color: black;
    border: 2px solid white;
    padding: 40px;
    color: white; 
    align-items: flex-start;  
    display: flex;
}

.top-box img {
    width: 170px;
    height: 170px;
    flex-shrink: 0;
}

.content2 {
    margin-left: 15px;
    color: white;
}

.content2 p {
    font-size: 1.2em;
    line-height: 1.2;
}


.top-mid {
    width: 100%;
    background-color: black;
    border: 2px solid white;
    padding: 15px;
    color: white;   

}

.top-mid img {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.top-mid h1 {
    font-size: 1.2em;
    margin-bottom: 4px;
}

.top-mid p{
    font-size: 1em;
    margin-bottom: 4px;
}

.container {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap; /* COMANDO MÁGICO: Permite que os itens caiam para a linha de baixo */
}

.box {
    background-color: black;
    border: 2px solid white;
    display: flex;
    align-items: flex-start;
    padding: 15px;
    flex: 1 0 calc(50% - 10px); /* Garante caixas de tamanhos iguais */
}

.box img {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.content {
    margin-left: 15px;
    color: white;
}

.content h1 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.content p {
    font-size: 0.9em;
    line-height: 1.4;
}

/* Container Principal do Mural */
.mural-container {
    background-color: black;
    border: 2px solid white;
    padding: 20px;
    width: 100%;
}

/* Estilo dos Botões das Abas */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #555; /* Linha separadora */
    padding-bottom: 10px;
}

.tab-btn {
    background-color: #333;
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

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

/* Botão da aba ativa fica diferente */
.tab-btn.active {
    background-color: white;
    color: black;
}

/* O GRANDE SEGREDO: O GRID 4x4 */
.tab-content {
    display: none; /* Esconde todas as galerias por padrão */
    grid-template-columns: repeat(4, 1fr); /* Cria exatamente 4 colunas */
    gap: 10px; /* Espaço entre as fotos */
}

/* Classe para mostrar a galeria ativa */
.tab-content.active {
    display: grid; /* Ativa o Grid apenas na aba selecionada */
}

.tab-content img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Força as fotos a serem quadradas perfeitas */
    object-fit: cover;   /* Corta a imagem para não distorcer */
    border: 1px solid #555;
    border-radius: 4px;
}