@import
url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap');

:root {
  --branco: #ffffff;             /* Texto principal e ícones */
  --cor-de-fundo: #0a111e;       /* Fundo geral da página */
  --fundo-senha: #111a2e;        /* Fundo do cartão/gerador */
  --fundo-texto: #18253d;        /* Campo onde a senha é exibida */
  --cor-destaque: #10b981;       /* Verde vibrante dos botões e seleções */
  --borda: #1e2d4a;              /* Bordas sutis das caixas */
  --roboto: 'Roboto', sans-serif;
  --roboto-mono: 'Roboto Mono', monospace;

  /* Força da senha */
  --cor-fraca: #ef4444;          /* Vermelho */
  --cor-media: #f59e0b;          /* Laranja */
  --cor-forte: #10b981;          /* Verde (mesmo tom do botão) */
}

*{
font-weight: 400;
}

body{

color: var(--branco);
background-color: var(--cor-de-fundo);
font-family: var(--roboto);
}

.titulo-principal{
font-family: var(--roboto-mono);
font-size: 32px;
}

.titulo-secundario{
font-size: 24px;
}

.conteudo-titulo{
text-align: center;
margin-top: 80px;
}

.conteudo-senha{
margin-top: 80px;
background: var(--fundo-senha);
padding: 24px;
border-bottom: 6px solid var(--borda);
}

#campo-senha{
background-color: var(--fundo-senha);
border: none;
color: var(--branco);
font-family: var(--roboto-mono);

font-size: 40px;
width: 70%;
}

#campo-senha:focus{
outline: none;
}

.conteudo{
max-width: 1200px;
margin: 0 auto;
}

.parametro{
background-color: var(--fundo-texto);
border: 2px solid var(--borda);
margin-top: 32px;
padding: 24px;
}

.parametro-titulo{
font-family: var(--roboto-mono);
font-size: 28px;
}

.parametro-senha__titulo{
font-size:24px;
}

.parametro-coluna__senha{
display: flex;

flex-direction: column;
justify-content: center;
}
.parametro-senha{
width: 50%;
margin: 0 auto;
}

.parametro-senha-botoes{
display: flex;
justify-content: center;
}

.parametro-senha__botao{
background-color: var(--fundo-texto);
color: var(--branco);
border: 2px solid var(--borda);
padding: 24px;
font-size: 24px;
cursor: pointer;
}

.parametro-senha__texto{
padding: 24px;
border-top: 2px solid var(--borda);
border-bottom: 2px solid var(--borda);
margin: 0;
font-size: 24px;
}

label{

font-size: 20px;
}

.checkbox{
width: 20px;
height: 20px;
cursor: pointer;
}

.barra{
background-color: var(--fundo-senha);
height: 30px;
width: 100%;
}

.forca{
height: 30px;
position: relative;
bottom: 30px;
}

.fraca{
width: 25%;
background-color: #E71B32;
}

.parametro-senha-textos{
display: flex;
justify-content: space-between;
}

.media{
background-color: #FAF408;
width: 50%;
}

.forte{
background-color: #00FF85;
width: 100%;
}
@media screen and (min-width: 768px) {
.parametro-coluna__senha{
flex-direction: row;
}
}