body {
    /* Seleciona o corpo da página */
    background: black;
    /* Define o fundo como preto */
    color: white;
    /* Define a cor padrão do texto como branco */
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    /* Define a família de fontes */
    margin: 0;
    /* Remove margens padrão do navegador */
    min-height: 100vh;
    /* Garante que o corpo ocupe no mínimo a altura total da tela */
    transition: background 0.3s, color 0.3s;
    /* Suaviza a transição de cores */
}

/* Fecha a regra do body */

main {
    /* Seleciona o container principal */
    display: flex;
    /* Ativa o layout flexbox */
    flex-direction: column;
    /* Organiza os itens em uma coluna vertical */
    align-items: center;
    /* Centraliza os itens horizontalmente */
    justify-content: center;
    /* Centraliza os itens verticalmente */
    min-height: 100vh
        /* Garante que o main ocupe toda a altura da tela */
}

/* Fecha a regra do main */

h1 {
    /* Seleciona o título principal */
    font-size: 2.5rem;
    /* Define um tamanho de fonte grande */
    font-weight: bold;
    /* Deixa o texto em negrito */
    margin-bottom: 2rem;
    /* Adiciona um espaço abaixo do título */
    letter-spacing: 1px;
    /* Aumenta o espaçamento entre as letras */
}

/* Fecha a regra do h1 */

/* Container do toggle fixado no topo */
.theme-switch-wrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Estrutura base do switch */
.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

/* Esconde o checkbox original */
.theme-switch input {
    display: none;
}

/* Estilização do trilho (slider) */
.slider {
    background-color: #333; /* Cor do trilho no modo escuro */
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    border: 1px solid #555;
}

/* Estilização do círculo (knob) */
.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
    border-radius: 50%;
}

/* Cor de fundo quando ativado (Light Mode) */
input:checked + .slider {
    background-color: #e50914; /* Vermelho Netflix ao ativar */
}

/* Movimento do círculo quando ativado */
input:checked + .slider:before {
    transform: translateX(26px);
}

body.light-mode {
    /* Sobrescreve cores do body para o modo claro */
    background: #f3f3f3;
    color: #141414;
}

body.light-mode .Profile {
    /* Altera a cor do texto dos perfis no modo claro */
    color: #141414;
}

body.light-mode img:hover {
    /* Altera a cor da borda de hover no modo claro */
    border-color: #141414;
}

section[aria-label='Perfis Disponíveis'] {
    /* Seleciona a seção pelo atributo*/
    display: flex;
    /* Define como container flexível */
    width: 100%;
    /* Define a largura como 100% do container pai */
    justify-content: center;
    /* Centraliza o conteúdo da seção */
    max-width: 600px;
    /* Limita a largura máxima para 600 pixels */
}

/* Fecha a regra da section */

.Profiles {
    /* Seleciona a lista ordenada que contém os perfis */
    display: flex;
    /* Alinha os perfis lado a lado */
    justify-content: center;
    /* Centraliza os itens horizontalmente */
    gap: 2rem;
    /* Mantém o espaçamento entre os itens */
    list-style: none;
    /* Remove marcadores caso fosse uma lista */
    padding: 0;
    /* Remove o preenchimento interno */
}

/* Fecha a regra da classe .Profiles */

/* Wrapper da lista para remover estilos padrão */
.Profiles-Wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Fecha a regra da ul */

.Profile {
    /* Seleciona o link que envolve cada perfil */
    text-decoration: none;
    /* Remove o sublinhado padrão de links */
    color: white;
    /* Define a cor do texto do link como branco */
    transition: transform 0.2s, box-shadow 0.2s;
    /* Define a suavidade*/
}

/* Fecha a regra da classe .Profile */


figure {
    /* Seleciona o elemento que agrupa imagem e legenda */
    margin: 0;
    /* Remove a margem padrão do elemento figure */
    display: flex;
    /* Usa flexbox para organizar o conteúdo interno */
    flex-direction: column;
    /* Coloca imagem e legenda em uma coluna */
    align-items: center;
    /* Centraliza a imagem e o texto horizontalmente */
}

/* Fecha a regra do figure */

img {
    /* Seleciona as imagens dos perfis */
    width: 120px;
    /* Define a largura da imagem */
    height: 120px;
    /* Define a altura da imagem */
    border-radius: 8px;
    /* Arredonda levemente os cantos da imagem */
    object-fit: cover;
    /* Faz com que a imagem preencha o quadrado sem distorcer */
    margin-bottom: 0.5rem;
    /* Espaço abaixo da imagem*/
    background: black;
    /* Define um fundo preto para a imagem */
}

/* Fecha a regra da img */

img:hover {
    /* Define o estado da imagem ao passar o mouse */
    border: 1px solid #fff;
    /* Adiciona uma borda branca fina */
}

/* Fecha a regra de hover da imagem */

figcaption {
    /* Seleciona a legenda (o nome do usuário) */
    font-size: 1.1rem;
    /* Define o tamanho da fonte do nome */
    font-weight: 500;
    /* Define um peso de fonte médio */
    margin-top: 0.5rem;
    /* Adiciona um espaço entre a imagem e o nome */
    letter-spacing: 0.5px;
    /* Adiciona um leve espaçamento entre as letras */
}

/* Fecha a regra do figcaption */


/* RESPONSIVIDADE */

@media (max-width: 900px) {
    section[aria-label='Perfis Disponíveis'] {
        max-width: 100%;
        padding: 0 1rem;
    }

    .Profiles {
        gap: 1rem;
    }

    img {
        width: 100px;
        height: 90px;
    }

    h1 {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    main {
        margin-top: 6rem;
        margin-bottom: 6rem;
        min-height: auto;
        padding: 2rem 0;
    }

    .Profiles {
        display: grid; /* Mudamos para Grid para controle total das colunas */
        grid-template-columns: repeat(2, auto); /* Cria exatamente 2 colunas */
        gap: 2rem;
        justify-content: center;
    }

    img {
        width: 100px; /* Aumentei um pouco para preencher melhor as colunas */
        height: 100px;
    }

    h1 {
        /* Reduz o título em telas de celular */
        font-size: 1.5rem;
    }

    figcaption {
        font-size: 1rem;
    }
}