body {
    
    margin: 0; /* É a margem do elemento */
    
    padding: 0; font-family: Arial, sans-serif; /* É um atalho que evita definir uma distância para cada lado separadamente, e a fonte da letra */
    
     background-size: cover; /* informa ao navegador que ele deve se certificar de que a imagem cobrirá sempre o contêiner inteiro */
    
    height: 100vh; display: flex;/* height é a altura e vh é view height,  */
    
    align-items: center;/* permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal */
    
    justify-content: center;/* é usada para alinhar os elementos ao longo do eixo principal */
    
    background: url(../img/fundodoc1.png);/* é a imagem que esta sendo usada no fundo da tela  */
    }

    .quadrado{
        width: 100px;/* largura do quadrado */
        padding: 6%;/* É um atalho que evita definir uma distância para cada lado separadamente */
        border: 10% solid;/* é a borda da tela de login */
        border-radius: 10%;/* serve para deixar as pontas do quadrado mais redondas */
        box-sizing: border-box;/* faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura */
        background-color: #FFFFFF;/* a cor de fundo  */
        font-family: Cambria;/* fonte da letra */
        padding-right: 18%;/* indica a distância aplicada no lado direito do elemento */
        
    }

    .input-group {
        position: relative;/* é usado quando queremos alterar a posição de um elemento tendo como referência a posição inicial dele */
      
       }
       
       .input {
        border: solid 1.5px #000000; /* Define uma borda sólida preta com 1.5 pixels de largura */
        border-radius: 1rem; /* Define o raio da borda para criar cantos arredondados (1rem é uma abreviação para 1 vez o tamanho da fonte do elemento) */
        background: none; /* Define nenhuma cor de fundo */
        padding: 1rem; /* Define o preenchimento interno do elemento para 1rem */   
        font-size: 1rem; /* Define o tamanho da fonte para 1rem */
        color: #000000; /* Define a cor do texto como preto */
        transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Especifica um efeito de transição suave para a propriedade 'border' ao longo de 150 milissegundos com uma função de temporização cubic-bezier */
        margin-top: 3px; /* Define uma margem superior de 3 pixels */
    }
       
    .user-label {
        position: relative; /* Define o contexto de posicionamento como relativo */
        left: 15px; /* Move o elemento 15 pixels para a esquerda */
        color: #000000; /* Define a cor do texto como preto */
        pointer-events: none; /* Impede que o elemento receba eventos de ponteiro */
        transform: translateY(1rem); /* Move o elemento verticalmente por 1rem */
        transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Especifica um efeito de transição suave para o elemento ao longo de 150 milissegundos com uma função de temporização cubic-bezier */
    }
       
    .input:focus, input:valid{

    outline: none; /* Remove a borda ao focar no input ou quando é válido */
    border: 1.5px solid #1a73e8; /* Define uma borda sólida com a cor #1a73e8 quando o input está em foco ou é válido */
  }
        
       
  .input:focus ~ label, input:valid ~ label {

    transform: translateY(-50%) scale(0.8); /* Move o elemento de rótulo para cima e o dimensiona para baixo quando o input está em foco ou é válido */
    background-color: #212121; /* Define a cor de fundo do rótulo como #212121 quando o input está em foco ou é válido */
    padding: 0 .2em; /* Define o preenchimento para o rótulo */
    color: #2196f3; /* Define a cor do texto do rótulo como #2196f3 quando o input está em foco ou é válido */
  }
    .botaoo {
    display: inline-block; /* Define a propriedade de exibição como inline-block */
    padding: 14px 28px; /* Define o preenchimento para o botão */
    padding-left: 33%; /* Define o preenchimento à esquerda como 33% */
    padding-right: 33%; /* Define o preenchimento à direita como 33% */
    margin: 10%; /* Define uma margem de 10% em todos os lados */
    margin-left: -80%; /* Move o botão 80% para a esquerda de sua posição normal */ 
    margin-right: -114%; /* Move o botão 114% para a direita de sua posição normal */
    margin-top: -2.7%; /* Move o botão 2.7% acima de sua posição normal */
    margin-bottom: -11%; /* Move o botão 11% abaixo de sua posição normal */
    font-size: 25px; /* Define o tamanho da fonte como 25 pixels */
    font-weight: bold; /* Define o peso da fonte como negrito */
    text-transform: uppercase; /* Converte o texto para maiúsculas */
    color: #ffffff; /* Define a cor do texto como branco */
    background-image: linear-gradient(to bottom right, #00c6ff, #0072ff); /* Aplica um gradiente linear do #00c6ff para o #0072ff como imagem de fundo */
    border-radius: 40px; /* Define o raio da borda para criar cantos arredondados */
    box-shadow: 0px 4px 0px #0072ff; /* Aplica uma sombra ao redor do botão com uma cor azul */
}