/* ESTILOS PRINCIPAIS */

/* Definição de fontes personalizadas */
@font-face {
   font-family: flower;
   src: url("../fonts/IndieFlower-Regular.ttf"); /* Fonte para elementos decorativos */
}

@font-face {
   font-family: delius;
   src: url("../fonts/Delius-Regular.ttf"); /* Fonte principal para texto */
}

/* Reset básico para todos os elementos */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; /* Modelo de caixa mais previsível */
}

/* Estilos do corpo da página */
body {
   background: url("../img/wallpaper1.png") no-repeat center center fixed; /* Imagem de fundo fixa */
   background-size: cover; /* Cobrir toda a área */
   position: relative;
   margin: 0;
   padding: 0;
   min-height: 100vh; /* Altura mínima da viewport */
   font-family: "delius"; /* Fonte principal */
   font-size: 20px; /* Tamanho de fonte aumentado */
   color: #e0e0ff; /* Cor de texto azul claro */
   display: flex;
   justify-content: center; /* Centralizar horizontalmente */
   align-items: center; /* Centralizar verticalmente */
   overflow-x: hidden; /* Esconder rolagem horizontal */
}

/* Camada escura sobre o fundo para melhor contraste */
body::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Overlay escuro */
   z-index: -1; /* Ficar atrás do conteúdo */
}

/* Container principal de conteúdo */
.content {
   max-width: 1200px; /* Largura máxima */
   width: 95%; /* Largura responsiva */
   margin: 20px auto; /* Centralizar com margens */
   padding: 20px;
}

/* Cabeçalho da página */
header {
   text-align: center;
   padding: 20px;
   margin-bottom: 20px;
}

/* Título principal */
header h1 {
   margin: 0;
   font-size: 2.5em;
   color: #ddff00; /* Amarelo neon */
   text-shadow: 0 0 5px rgba(221, 255, 0, 0.7); /* Efeito de brilho */
   letter-spacing: 1px; /* Espaçamento entre letras */
}

/* Estilos básicos de links */
a {
   color: lightblue;
   text-decoration: none; /* Sem sublinhado padrão */
}

/* Efeito ao passar o mouse nos links */
a:hover {
   text-decoration: underline; /* Sublinhado no hover */
}

/* Container para nav e main lado a lado */
.container {
   display: flex; /* Layout flexível */
   gap: 20px; /* Espaço entre elementos */
}

/* Barra de navegação */
nav {
   flex: 0 0 200px; /* Largura fixa */
   display: flex;
   flex-direction: column; /* Itens em coluna */
   padding: 15px;
   background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
   border-radius: 5px; /* Bordas arredondadas */
   border: 1px solid rgba(255, 255, 255, 0.6); /* Borda com transparência */
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Sombra suave */
   height: fit-content; /* Altura conforme conteúdo */
}

/* Links de navegação */
nav a {
   display: block;
   padding: 10px;
   margin-bottom: 8px; /* Espaço entre links */
   color: #a0d0ff; /* Azul claro */
   text-decoration: none;
   background-color: rgba(30, 30, 70, 0.8); /* Fundo azul escuro */
   border-radius: 5px; /* Bordas arredondadas */
   border: 1px solid rgba(100, 200, 255, 0.4); /* Borda azul */
   text-align: center;
   transition: all 0.3s ease; /* Transição suave */
}

/* Efeito hover nos links de navegação */
nav a:hover {
   background-color: rgba(50, 50, 150, 0.9); /* Fundo mais claro */
   color: #ffffff; /* Texto branco */
   border: 1px solid rgba(255, 255, 255, 0.8); /* Borda branca */
   transform: translateX(3px); /* Movimento sutil */
}

/* Conteúdo principal */
main {
   flex: 1; /* Ocupar espaço restante */
   padding: 20px;
   background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
   border-radius: 5px; /* Bordas arredondadas */
   border: 1px solid rgba(255, 255, 255, 0.6); /* Borda com transparência */
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* Sombra suave */
   text-align: justify; /* Texto justificado */
}

/* Estilo da janela (título das seções) */
#window {
   overflow: hidden;
   margin: 0;
   color: #000; /* Texto preto */
   padding: 0px 15px;
   border: solid 2.5px #ffffff; /* Borda branca grossa */
   position: relative;
   background-color: #ddff00; /* Fundo amarelo */
   background-image: url("../img/window-buttons.png"); /* Botões de janela */
   background-repeat: no-repeat;
   background-position: right; /* Alinhado à direita */
}

/* Título dentro da janela */
#window h1 {
   margin: 8px 0;
   font-size: 1.8em;
   font-weight: bold;
}

/* Conteúdo dentro das seções */
.conteudo {
   padding: 20px;
   border: solid 2.5px #ffffff; /* Borda branca */
   line-height: 1.6; /* Espaçamento entre linhas */
}

/* Seções individuais */
section {
   border: solid 2.5px #ffffff; /* Borda branca */
   margin: 20px 0px; /* Espaçamento vertical */
   background-color: rgba(10, 10, 40, 0.8); /* Fundo azul escuro */
}

.profile-details {
   padding-left: 1em;
 }
 

/* Caixas com estilo retro */
.retro-box {
   border: 2px solid #e0e0ff; /* Borda azul claro */
   padding: 15px;
   margin: 15px 0;
   background-color: rgba(20, 20, 60, 0.7); /* Fundo azul mais claro */
}

/* Títulos dentro de caixas retro */
.retro-box h2 {
   color: #ddff00; /* Amarelo neon */
   margin-bottom: 10px;
   border-bottom: 1px dashed #a0d0ff; /* Linha tracejada */
   padding-bottom: 5px;
}

/* Efeito de tela CRT para estilo retro */
.crt-effect {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: 
      linear-gradient(rgba(18, 16, 16, 0) 50%, 
      rgba(0, 0, 0, 0.25) 50%), /* Linhas de varredura */
      linear-gradient(90deg, rgba(255, 0, 0, 0.06), 
      rgba(0, 255, 0, 0.02), 
      rgba(0, 0, 255, 0.06)); /* Efeito de desalinhamento de cores */
   z-index: 999; /* Ficar acima de tudo */
   pointer-events: none; /* Não interferir com interações */
   background-size: 100% 4px, 4px 100%; /* Tamanho dos gradientes */
}

/* RESPONSIVIDADE */

@media (max-width: 768px) {
   .container {
      flex-direction: column; /* Empilhar elementos em telas pequenas */
   }
   
   nav {
      flex: 0 0 auto; /* Altura automática */
      flex-direction: row; /* Links em linha */
      flex-wrap: wrap; /* Quebrar linha se necessário */
      justify-content: center; /* Centralizar links */
   }
   
   nav a {
      flex: 1; /* Crescer para preencher espaço */
      min-width: 120px; /* Largura mínima */
      margin: 5px; /* Espaçamento menor */
   }
   
   header h1 {
      font-size: 2em; /* Tamanho menor de fonte */
   }
}