:root {
    --bg: #141414;
    --card: #1f1f1f;
    --card-hover: #2a2a2a;
    --text: #ffffff;
    --secondary: #b3b3b3;
    --accent: #e50914;
}

* {
    box-sizing: border-box;
}
#logo {
    width: 150px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    display: flex;
    align-items: center;
}

#logo-principal {
    width: 200px;
    height: 80px;
    object-fit: contain; /* Mantém a proporção */
}
body {
    background: #141414;              /* Define a cor de fundo da página */
    color: #fff;                      /* Define a cor do texto principal */
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif; /* Define a fonte usada no site */
    margin: 0;                        /* Remove a margem padrão do body */
    min-height: 100vh;               /* Garante que o body ocupe pelo menos toda a altura da tela */
}

main {
    display: flex;                   /* Usa flexbox para layout */
    flex-direction: column;          /* Organiza os elementos em coluna */
    align-items: center;             /* Centraliza os itens horizontalmente */
    justify-content: center;         /* Centraliza os itens verticalmente */
    min-height: 100vh;               /* Garante altura mínima de 100% da tela */
}

h1 {
    font-size: 2.5rem;               /* Define o tamanho da fonte do título */
    font-weight: bold;               /* Deixa o texto em negrito */
    margin-bottom: 2rem;            /* Espaço abaixo do título */
    letter-spacing: 1px;            /* Espaçamento entre letras */
}

#theme-toggle {
    position: fixed;                 /* Posicionamento fixo */
    top: 1rem;                      /* 1rem do topo */
    right: 1rem;                    /* 1rem da direita */
    background: #f5f5f5;             /* Fundo claro (cor do light mode) */
    color: #222;                     /* Texto escuro */
    border: none;                    /* Remove borda */
    padding: 0.5rem;                 /* Espaçamento interno menor para ícones */
    border-radius: 50%;              /* Bordas arredondadas para circular */
    cursor: pointer;                 /* Cursor de ponteiro */
    font-size: 1.5rem;               /* Tamanho maior para ícones */
    width: 3rem;                     /* Largura fixa */
    height: 3rem;                    /* Altura fixa */
    display: flex;                   /* Centraliza o ícone */
    align-items: center;             /* Centraliza verticalmente */
    justify-content: center;         /* Centraliza horizontalmente */
    z-index: 1000;                   /* Fica acima de outros elementos */

}



section[aria-label="Perfis disponíveis"] {
    width: 100%;                     /* Ocupa toda a largura disponível */
    max-width: 600px;                /* Limita a largura máxima */
    display: flex;                   /* Usa flexbox */
    justify-content: center;         /* Centraliza os perfis */
}

nav.profiles {
    display: flex;                   /* Usa flexbox para os perfis */
    gap: 2rem;                       /* Espaço entre os perfis */
}

ul {
    list-style: none;                /* Remove o ponto dos itens da lista */
    padding: 0;                      /* Remove o padding padrão */
    margin: 0;                       /* Remove a margem padrão */
    display: flex;                   /* Usa flexbox para os itens */
    flex-wrap: wrap;                 /* Permite que os itens quebrem para a próxima linha */
    justify-content: center;         /* Centraliza os itens */
    gap: 1rem;                       /* Espaço entre os itens */
}

.profile {
    text-decoration: none;           /* Remove sublinhado dos links */
    color: #fff;                     /* Cor do texto dos links */
    transition: transform 0.2s, box-shadow 0.2s; /* Suaviza animações de transformação e sombra */
}

figure {
    margin: 0;                       /* Remove margem padrão */
    display: flex;                   /* Usa flexbox */
    flex-direction: column;          /* Organiza em coluna */
    align-items: center;             /* Centraliza itens */
}

img {
    width: 200px;                    /* Largura fixa da imagem */
    height: 200px;                   /* Altura fixa da imagem */
    border-radius: 8px;              /* Bordas arredondadas */
    object-fit: cover;               /* Mantém proporção da imagem */
    margin-bottom: 0.5rem;          /* Espaço abaixo da imagem */
    background: #222;                /* Cor de fundo da imagem */
    display: block;                  /* Exibe como bloco */
    border: 1px transparent;         /* Borda inicial invisível */
}

img:hover {
    border: 1px solid #f7f4f4;          /* Borda branca ao passar o mouse */
}

figcaption {
    font-size: 1.1rem;               /* Tamanho da fonte da legenda */
    font-weight: 500;                /* Peso da fonte */
    margin-top: 0.5rem;             /* Espaço acima da legenda */
    letter-spacing: 0.5px;          /* Espaçamento entre letras */
}

/* Light mode */
body.light-mode {
    background: #f5f5f5;             /* Cor de fundo clara */
    color: #222;                     /* Cor do texto escura */
}

.light-mode .profile {
    color: #222;                     /* Links escuros */
}

.light-mode img {
    background: #eee;                /* Fundo claro para imagens */
    border: 1px solid #ccc;          /* Borda clara */
}

.light-mode #theme-toggle {
    background: #0f0f0f;             /* Fundo vermelho Netflix no light mode */
    color: #fff;                     /* Texto branco */
}


/* Responsividade para tablets e celulares */
@media (max-width: 900px) {
    section[aria-label="Perfis disponíveis"] {
        max-width: 100%;             /* Remove limite de largura */
        padding: 0 1rem;             /* Adiciona espaçamento lateral */
    }

    nav.profiles {
        gap: 1rem;                   /* Reduz espaço entre perfis */
    }

    img {
        width: 150px;                 /* Reduz tamanho da imagem */
        height: 150px;                /* Reduz altura da imagem */
    }

    h1 {
        font-size: 2rem;             /* Reduz tamanho do título */
    }
}

@media (max-width: 600px) {
    main {
        margin-top: 6rem;            /* Aumenta a margem superior para dar mais espaço em telas pequenas */
        min-height: auto;            /* Remove altura mínima */
        padding: 2rem 0;             /* Adiciona padding */
    }

    nav.profiles {
        flex-direction: column;      /* Perfis em coluna */
        align-items: center;         /* Centraliza */
    }

    ul {
        gap: 4rem;                   /* Aumenta espaço entre itens */
    }
}

@media (min-width: 901px) {
    nav.profiles {
        flex-direction: row;         /* Perfis na horizontal em telas grandes */
        align-items: center;         /* Centraliza */
    }

    ul {
        flex-wrap: nowrap;           /* Impede quebra de linha para manter 4 perfis lado a lado */
    }

    img {
        width: 140px;                 /* Imagem menor */
        height: 140px;                /* Altura menor */
    }

    h1 {
        font-size: 1.5rem;           /* Título menor */
    }

    figcaption {
        font-size: 1rem;             /* Legenda menor */
    }
}