@charset "UTF-8";

/* ===== RESET BÁSICO ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== VARIÁVEIS DE COR (PALETA) ===== */
:root {
    --cor-fundo: #0a0a0a;
    --cor-texto: #e0c097;
    --cor-detalhe: #FF1E4D;
    --cor-acentos: #c28840;
    --cor-caixa: #757575;
    --cor-header:#b6b6b6;
}

/* ===== BODY E ESTRUTURA GERAL ===== */
header{
    background-color: var(--cor-header);
    height: 10%;
    display: flex;
}
.b{
    width: 400px;
    margin: 0 auto;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    font-size: x-large;
}

/* ===== IMAGEM DE FUNDO ===== */
body::before {
    content: "";
    background-image: url(background.png);
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/* ===== ELEMENTOS GERAIS ===== */
main {
    padding: 20px;
    max-width: 1000px;
    margin: auto;
}

h1, h2, h3 {
    color: var(--cor-acentos);
    margin-bottom: 10px;
}

a {
   
    text-decoration: none;
    color: var(--cor-detalhe);
    
}
a:hover {
    text-decoration: underline;
    background-color: var(--cor-texto);
    border-radius: 5px;
    transition: 0.2s;
    padding: 2px;
   
}

/* ===== TEXTOS ===== */
.texto {
    margin-bottom: 30px;
}
span{
    color: var(--cor-detalhe);
}
.footer:hover{
    transition: 0.5s;
    text-decoration: underline;
    color: var(--cor-fundo);
}
/* ===== AVATAR (IMAGENS REDONDAS COM TEXTO LADO A LADO) ===== */
.avatar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}


.avatar img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--cor-acentos);
     transition: transform 0.3s ease;
}
.avatar img:active{
    transform: scale(2);
}

/* ===== IMAGEM À ESQUERDA ===== */
.left{
        display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
   
}
.lado-esquerdo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.lado-esquerdo img {
    max-width: 300px;
    height: auto;
    border: 2px solid var(--cor-acentos);
}

/* ===== FIGURES ===== */
figure {
    margin-bottom: 20px;
    display: flex;
     justify-content: center;
}
.menor{
   
    width: 500px;
    border: 2px solid var(--cor-acentos);
    
}
#a{
     width: 400px;
     height: 400px;
     margin: 5px;
}
#b{
         width: 510px;
     height: 400px;
     margin: 5px;
}


/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--cor-caixa);
    color: #888;
    font-size: 0.8em;
    margin-top: 40px;
}