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

:root{
    --branco: white;
    --cor-de-fundo: #00162E;
    --fundo-senha: #00244D;
    --fundo-texto: #001e40;
    --borda: #007FF;
    --roboto: 'Roboto', sans-serif;
    --roboto-mono: 'Roboto Mono', monospace;
   }

   *{
      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: 70px
         }

           #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(--branco);
                 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;   
              }
              .media{
                background-color: #faf408;
                width: 50%;
              }
              .forte{
                background-color: #00ff85;
                width: 100%;
              }

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


              @media  screen and (min-width: 768px) {
                .parametro-coluna__senha{
                  flex-direction: row;
              }
            }