/* Importando a fonte pixelada do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Configuração Geral */
body {
    background-color: #003366; /* Azul Escuro */
    color: #FFFF00; /* Amarelo */
    font-family: 'Press Start 2P', cursive; /* Fonte Pixelada */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 0;
    font-size: 12px; /* Fontes pixeladas ficam melhores pequenas */
    line-height: 1.5;
}

/* Título Principal - Inspirado no seu rascunho */
.site-title {
    border: 4px solid #FFFF00;
    width: 800px;
    padding: 25px;
    text-align: center;
    font-size: 24px; /* Tamanho ajustado para a fonte pixel */
    margin-bottom: 15px;
    background-color: #002244;
}

/* Menu de Navegação */
nav {
    border: 3px solid #FFFF00;
    width: 854px;
    display: flex;
    margin-bottom: 30px;
    background-color: #002244;
}

nav a {
    flex: 1;
    text-align: center;
    padding: 15px 5px;
    text-decoration: none;
    color: #FFFF00;
    border-right: 3px solid #FFFF00;
    text-transform: uppercase;
    font-size: 10px;
}

nav a:last-child { border-right: none; }
nav a:hover { background-color: #FFFF00; color: #003366; }

/* Layout Lado a Lado */
.main-layout {
    display: flex;
    width: 854px;
    gap: 20px;
}

/* Lateral de Projetos */
.sidebar { width: 220px; }

.sidebar-title {
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}

.project-item {
    border: 3px solid #FFFF00;
    margin-bottom: 20px;
    background-color: #002244;
}

.img-box {
    height: 120px;
    border-bottom: 3px solid #FFFF00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.project-label {
    text-align: center;
    padding: 10px;
    font-size: 10px;
}

/* Coluna de Conteúdo (About e News) */
.content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.section-box {
    border: 4px solid #FFFF00;
    padding: 20px;
    background-color: #002244;
}

.section-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.big-image-placeholder {
    border: 2px solid #FFFF00;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Área de News com Scroll */
.news-area {
    border: 2px solid #FFFF00;
    height: 250px;
    overflow-y: scroll;
    padding: 15px;
    background-color: #001a33;
    font-size: 10px;
}

/* Estilo da barra de scroll (para ficar amarela) */
.news-area::-webkit-scrollbar { width: 10px; }
.news-area::-webkit-scrollbar-track { background: #002244; }
.news-area::-webkit-scrollbar-thumb { background: #FFFF00; border: 1px solid #000; }

hr { border: 1px solid #FFFF00; margin: 15px 0; }

/* Rodapé Final */
.footer-box {
    border: 3px solid #FFFF00;
    width: 700px;
    margin-top: 50px;
    padding: 15px;
    text-align: center;
    font-size: 9px;
    background-color: #002244;
}