/* Defina a fonte personalizada com @font-face */
@font-face {
    font-family: 'SD Dystopian';
    src: url('fonts/SD-Dystopian-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #121212;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* HEADER */
header {
    background-color: #1e1e1e;
    background-image: url('photos/icons/tech.png'); /* Imagem de fundo no header */
    background-size: cover; /* A imagem cobre toda a área do header */
    background-position: center; /* A imagem fica centralizada */
    background-repeat: no-repeat; /* A imagem não se repete */
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* TÍTULO ESTILIZADO */
.h1-container {
    display: inline-block;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    background-color: #1e1e1e; /* Cor de fundo da div, para não ter transparência */
}

.h1-container:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 85, 85, 0.9);
}

h1 {
    margin: 0;
    font-size: 4.5em;  /* Tamanho maior do título */
    font-family: 'SD Dystopian', sans-serif; /* Usa a fonte SD Dystopian */
    font-weight: normal; 
    letter-spacing: 2px;
    color: #ff0000;  /* Cor do título totalmente vermelho */
    text-shadow: none; /* Sem o efeito neon enquanto não está em hover */
    background-color: #1e1e1e;  /* Fundo do título com a mesma cor da div About Me */
    padding: 20px;
    width: 100%; /* O título ocupa toda a largura disponível */
    box-sizing: border-box; /* Considera o padding dentro do cálculo do tamanho */
    transition: all 0.4s ease-in-out;
}

.h1-container h1:hover {
    color: #ff3030;  /* Altera para um vermelho mais suave ao passar o mouse */
    text-shadow: none; /* Remove o efeito neon ao passar o mouse */
}

/* BIO SECTION */
.bio {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    max-width: 900px;
    margin: auto;
    background-color: #1e1e1e; /* Cor de fundo da seção About Me */
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 20px;
}

/* TÍTULO DA SEÇÃO ABOUT ME */
.bio h2 {
    font-family: 'SD Dystopian', sans-serif;
    color: #ff0000;
    font-size: 2.5em;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* NOVA SEÇÃO DE CONTACTO */
#contact {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    padding: 40px 20px;
    max-width: 900px; /* Agora o tamanho da div Contact é igual ao tamanho da bio */
    margin: auto;
    background-color: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
    text-align: center; /* Centraliza o conteúdo da seção Contact */
}

#contact h2 {
    font-family: 'SD Dystopian', sans-serif;
    color: #ff0000;
    font-size: 2.5em;
    letter-spacing: 1px;
    margin-bottom: 10px; /* Reduziu a distância entre o título e a frase */
}

#contact p {
    color: #fff;  /* Texto branco */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;  /* Remover margens para manter o alinhamento */
    padding: 20px 0;
    line-height: 1.6;
    text-align: center;
}

/* Estilo para os ícones sociais */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px; /* Aumenta a distância para os ícones */
}

.social-icon img {
    width: 60px; /* Tamanho uniforme para todos os ícones */
    height: 60px; /* Tamanho uniforme para todos os ícones */
    border-radius: 50%; /* Torna os ícones redondos */
    object-fit: cover; /* Garante que a imagem ocupe completamente o espaço sem distorcer */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de hover para os ícones */
.social-icon img:hover {
    transform: scale(1.1); /* Aumenta ligeiramente o ícone quando o mouse passa por cima */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6); /* Efeito de sombra ao passar o mouse */
}

/* CSS para o footer */
footer {
    background-color: #1e1e1e;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.terminal {
    margin-left: 50px;
    margin-right: 70%;
    padding: 20px;
    background-color: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
}