body {
    background-image: url('background.jpg'); /* Define sua imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-size: cover; /* Faz a imagem cobrir a tela toda */
    background-position: center center; /* Centraliza a imagem */
    background-attachment: fixed; /* (Opcional) Mantém a imagem fixa ao rolar a página */
    background-color: #000; /* Cor de fallback caso a imagem não carregue */
    
    /* ... o resto do seu código CSS ... */
}
/*
 * Arquivo: style.css
 * Estilo: Retro Internet / Neocities Aesthetic (Inspirado em VANITYRUINS)
 * ----------------------------------------------------------------------
 */

/* RESET BÁSICO E ESTILO DE CORPO */
body {
    /* Fundo totalmente preto. Você pode adicionar uma imagem repetitiva aqui se quiser: */
    background-color: #fff;
    /* background-image: url('background-tile.gif'); */ 
    /* background-repeat: repeat; */
    
    color: #fff; /* Texto principal do parágrafo em branco */
    font-family: 'Verdana', 'Arial', sans-serif; /* Fonte comum da época */
    font-size: 12px;
    margin: 0;
    padding: 20px;
    text-align: center; /* Centraliza o container */
}

/* CONTAINER PRINCIPAL */
#container {
    width: 900px; /* Largura fixa para replicar a sensação retro */
    margin: 0 auto; /* Centraliza o container na página */
    text-align: left; /* Garante que o texto dentro do container volte para a esquerda */
}

/* CABEÇALHO/TOPO */
header {
    border-bottom: 2px solid #C00; /* Linha de separação vermelha */
    padding-bottom: 5px;
    margin-bottom: 20px;
}
#title {
    font-size: 32px;
    font-weight: bold;
    color: #C00; /* Título principal em vermelho escuro */
}
#subtitle {
    font-size: 14px;
    color: #aaa;
    margin-left: 10px;
    vertical-align: top;
}
#top-nav {
    float: right;
    font-size: 14px;
    padding-top: 15px;
}

/* ESTILO DOS LINKS (Tons vibrantes e sublinhado) */
a {
    color: #F00; /* Links vermelhos vibrantes */
    text-decoration: none;
}
a:hover {
    color: #FF0; /* Links amarelos ao passar o mouse */
    text-decoration: underline;
}

/* LAYOUT DE 3 COLUNAS (O ESSENCIAL para colocar lado a lado) */
#layout-grid {
    display: flex; /* <-- ESSENCIAL para a visualização das colunas */
    gap: 15px; /* Espaço entre as colunas */
}

#left-col {
    width: 200px; /* Largura da coluna esquerda */
    flex-shrink: 0;
}

#main-content {
    flex-grow: 1; /* Ocupa o espaço restante */
}

#right-col {
    width: 200px; /* Largura da coluna direita */
    flex-shrink: 0;
}

/* ESTILO DE BLOCO DE CONTEÚDO */
.block {
    background-color: #1a0000; /* Fundo vermelho/vinho escuro para os blocos */
    border: 1px dashed #C00; /* Borda tracejada */
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 3px 3px 0px 0px #C00; /* Sombra simples para dar profundidade */
}
.block h3, .block h4 {
    color: #FF0; /* Títulos dos blocos em amarelo */
    margin-top: 0;
    border-bottom: 1px dotted #C00;
    padding-bottom: 5px;
}
.block h2 {
    /* Títulos dentro dos blocos, como o "sobre mim" */
    color: #fff; /* Deixa o h2 em branco */
    font-size: 20px;
    margin-top: 0;
}

/* Imagens */
.pixel-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px auto;
    border: 1px solid #C00;
}
.banner-img {
    display: block;
    margin: 5px auto;
}

/* ESTILOS DE TEXTO ESPECÍFICOS (Destaques) */
.intro-text {
    border: 1px dotted #880000;
    padding: 10px;
}
.red-text {
    color: #F00; /* Destaques em vermelho */
    font-weight: bold;
}
.highlight {
    color: #F0F; /* Cor de destaque rosa/magenta */
    font-weight: bold;
}

/* Estilo do bloco de Humor/Música na direita */
.music-box {
    text-align: center;
}
#song-prompt {
    font-family: 'Courier New', monospace; /* Fonte com estilo diferente */
    font-size: 18px;
    color: #FF0; /* Amarelo brilhante */
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.mood-text {
    font-size: 16px;
    color: #0F0; /* Verde neon */
    font-weight: bold;
}

/* Lista sem marcadores */
ul {
    list-style: none;
    padding: 0;
}
li {
    margin-bottom: 3px;
}

/* Galeria de imagens lado a lado */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-around;
    padding: 10px 0;
}
.image-gallery img {
    width: 30%; /* Para ter 3 ou mais imagens por linha */
    border: 1px solid #C00;
}