@import url('https://fonts.googleapis.com/css2?family=Savate:ital,wght@0,200..900;1,200..900&display=swap');

:root {
--branco: white;
--cor-de-fundo: #5a166b;
--cor-de-senha: #e6d647;
--fundo-texto: #cc76fd;
--borda: #fbcfff;
--fonte: 'Embed code', sans-serif;
}

* {
font-weight: 500;
}

body {
color: var(--branco);
background-color: var(--cor-de-fundo);
font-family: var(--fonte);
}
.titulo_principal{
font-family: var(--fonte);
font-size: 32px;
}
.titulo_secundario{
font-size: 24px;
}
.conteudo_titulo{
text-align: center;
margin-top: 80px;

}
.cadeado_conteudo{
width: 100px;
}
.cadeado_conteudo{
width: 150px
}
.conteudo_senha{
margin-top: 80px;
background: var(--fundo-senha);
padding: 24px;
border-bottom: 6px dotted var(--borda);
}
#campo_senha{
background-color: var(--fundo-senha);
border:none;
color:var(--branco);
font-size: 40px;
width: 70%;
}
#campo_senha:focus{
outline:none;
}
.conteudo_senhas{
max-width: 1200px;
margin: 0 auto;
}
.parametro{
    background-color: var(--fundo-texto);
    border: 2px solid var(--borda);
    margin-top: 32px;
    padding: 24px;
}
.parametro-senha_titulo{
    font-size: 24px;
}
.parametro_coluna_senha{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.parametro-senha{
    width: 50%;
    margin: 0 auto;
}
.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;
    }
}