body { 
    background-color: #f8fafd; /* Cor de fundo clara para o corpo da página */
    font-family: "Inter", sans-serif; /* Fonte padrão da página */
    font-optical-sizing: auto; /* Tamanho óptico automático da fonte */
    font-weight: 200; /* Peso leve da fonte */
    font-style: normal; /* Estilo normal, sem itálico */    
    color: #252525; /* Cor do texto */
    padding: 2rem; /* Espaçamento interno ao redor do conteúdo */
}

main { 
    max-width: 780px; /* Largura máxima do conteúdo principal */
    margin: 0 auto;  /* Centraliza o conteúdo horizontalmente */
}

.hero {
    padding-top: 2rem;
    text-align: center; /* Centraliza o texto */
    padding-bottom: 3rem; /* Espaçamento inferior */
}

.hero .title {
    font-size: 2rem; /* Tamanho da fonte do título */
    font-weight: bold; /* Título em negrito */
    padding-bottom: 1.5rem; /* Espaçamento abaixo do título */
    padding-top: 30px; /* Espaçamento acima do título */
}

.hero .subtitle {
    font-size: 1.125rem; /* Tamanho da fonte do subtítulo */
    color: #828282 ; /* Cor cinza clara */
}

.box { 
    background: #fff; /* Fundo branco */
    box-shadow: 0 1px 2px rgba(132, 148, 165, 0.08); /* Sombra leve para profundidade */
    border-radius: 8px ; /* Bordas arredondadas */
    margin-bottom: 3rem;  /* Espaço inferior entre as seções */
}

.password { 
    align-items: center; /* Alinha verticalmente ao centro */
    display: flex; /* Exibe como flex container */
    padding: 1rem 1.5rem;  /* Espaçamento interno */
} 

.password .text { 
    flex: 1;  /* Ocupa o máximo de espaço possível */
}

.password .text input { 
    font-family: "Inconsolata", serif; /* Fonte monoespaçada */
    font-size: 3rem;  /* Tamanho grande da fonte */
    border: none;  /* Sem borda */
    outline: none;  /* Sem contorno ao focar */
    cursor: default;  /* Cursor padrão */
    height: 52px; /* Altura fixa do input */
    width: 100% ; /* Largura total */
    transition: all 0.2s ;  /* Transição suave */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  /* Impede seleção de texto */
}

.password .actions button {
    background-color: transparent; /* Fundo transparente */
    border: none;  /* Sem borda */
    cursor: pointer !important; /* Cursor de clique */
    opacity: 0.7; /* Opacidade reduzida */
    transition: opacity 0.2s; /* Transição suave de opacidade */
}

.password .actions button:active { 
    transform: translateY(-2px);
}

.security-indicator {
    height: 10px ;  /* Altura da barra de segurança */
    background-color: #ddd; /* Cor de fundo da barra */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; /* Bordas inferiores arredondadas */
}

.security-indicator .bar {
    height: 10px; /* Altura da barra colorida */
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px;  /* Bordas arredondadas */
    border-top-right-radius: 0;
    transition: all 0.2s ;  /* Transição suave */
}

/* alterando status */
.security-indicator .bar.awful { 
    background-color: orange;
    width: 20% ;
}
.security-indicator .bar.critical {
    background-color: yellow; 
    width: 40%;
}

.security-indicator .bar.warning {
    background-color: rgb(123, 255, 123); 
    width: 60%;
}

.security-indicator .bar.safe { 
    background-color: green; 
    width: 100%;
}


#security-message { 
    display: flex;
    font-family: "Inter", sans-serif; /* Fonte padrão da página */
    margin-top: 1rem;
    justify-content: end;
    margin-right: 1rem;
    
}

.customize {
    padding: 1rem 1.5rem; /* Espaçamento interno */
}

.customize .title { 
    border-bottom: 1px solid #f0f0f0 ; /* Linha divisória inferior */
    font-size: 1.75 rem; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    margin-bottom: 2rem;  /* Espaço inferior */
    padding-bottom: 0.75 rem; /* Espaço inferior do título */
}

.customize .actions {
    display: flex; /* Exibe os elementos lado a lado */
    gap: 3rem ;  /* Espaço entre os elementos */
    color: #828282; /* Cor dos textos */
}

.customize .password-length {
    flex: 1; /* Ocupa o máximo de espaço */
}

.customize .password-length .slider {
    appearance: none;  
    -webkit-appearance: none;
    height: 10px; /* Altura da barra */
    background: #dddddd;  /* Cor de fundo da barra */
    outline: none;
    border-radius: 8px;  /* Bordas arredondadas */
    width: 100%; /* Largura total */
    opacity : 0.7;  /* Opacidade reduzida */
    transition: opacity 0.2s ;  /* Transição suave */
    margin-top: 1rem; /* Espaçamento superior */
}

/* hover, passa por cima e dá aparência que passou o mouse. */
.customize .password-length .slider:hover {
    opacity: 1; /* Fica totalmente visível ao passar o mouse */
}

.customize .password-length .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px ; 
    height: 25px;
    border-radius: 25px; /* Formato circular */
    background: #9b51e0;  /* Cor roxa */
    cursor: pointer !important ; 
}

.customize .password-length slider::-moz-range-thumb { 
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: #9b51e0;  
    cursor: pointer  ; 
}

.checkbox-container {
    display: block;
    position: relative ; 
    padding-left: 2rem;  /* Espaço à esquerda para a caixa */
    margin-bottom: 1rem;  /* Espaço inferior */
    cursor: pointer ;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* Impede seleção do texto */
}

.checkbox-container input { 
    position: absolute ; 
    height: 0;
    width: 0;
    opacity: 0;  /* Esconde o input real */
    cursor: pointer ; 
}

.checkbox-container .checkmark {
    position: absolute;
    top: 0 ; 
    left: 0;
    height: 25px;
    width: 25px; 
    background-color: #dddddd ;
    transition: all 0.2s ;
}

.checkbox-container:hover input ~ .checkmark {
    background-color: #cccccc; /* Cor ao passar o mouse */
}
.checkbox-container input:checked ~ .checkmark {
    background-color: #9b51e0; /* Cor roxa quando marcado */
}
.checkbox-container .checkmark:after {
    content: "";
    display: none;
    position: absolute;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg); /* Cria o símbolo de check */
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block; /* Exibe o símbolo quando marcado */
}

.submit {
    text-align: center; /* Centraliza o botão */
}

.submit button {
    background-color: #bb6bd9;  /* Cor de fundo do botão */
    font-size: 1.375rem; /* Tamanho da fonte */
    color: #fff ;  /* Cor do texto */
    border: none;  /* Sem borda */
    border-radius: 8px;  /* Bordas arredondadas */
    cursor: pointer;  /* Cursor de clique */
    padding: 1rem 2rem ; /* Espaçamento interno */
    transition: all 0.2s;  /* Transição suave */
}

.submit button:hover {
    background-color: #9b51e0; /* Cor ao passar o mouse */
}

.submit button:active { 
    transform: translateY(-2px); /* Efeito de "pressionar" ao clicar */
}

footer { 
    font-size: 0.8rem;
    text-align: center;
    margin-top: 13.5rem;
    display: flex;
    justify-content: center; 
}

footer p { 
    margin-right: 2rem;
}
#icon-git { 
    width: 2.5rem;
    height: 2.5rem;
}

#icon-git:hover { 
    transform: scale(1.2);
    transition: transform 0.2s ease;
}