/* Importando fontes padrão */
@import url("./fonts.css");
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/*Zerando CSS*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
}

/* Deixa responsivo */

@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){

html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

html {
  
}

/* BODY */

body {

}


/* Fundo - COMEÇO */

  /* Quadrados - alinhamento e display - COMEÇO */
    .quadrado1_1{
      background-color: rgb(111, 28, 158);
      width: 50%;
      height: 5vh;
      display: flex;
    }

    .quadrado2{
      background-color: rgb(111, 28, 158);
      width: 50vw;
      height: 95vh;
      display: flex;
    }

  /* Quadrados - alinhamento e display - FIM */

  /* Imagem ajuste */
      .imagem{
        width: 25vw;
        height: 25vw;
        margin-left: 10%;
        margin-top: 20%;
      }
/* Fundo - FIM */


/*Conteudo principal Display - COMEÇO */
.principal{
  display: flex;
}

  /* Alinhamento formulário*/
  .container-form{
    display: flex;
    width: 50vw;
  }

/*Conteudo principal Display - FIM */


/* Formulário fundo, cor e tamanho - COMEÇO */
.form-login{
  color: #fff;
  margin-left: 25%;
  height: 37vw ;
  margin-top: 10%;
  width: 32vw;
  border: 0.15vw solid rgb(169, 169, 169);
  border-radius: 1.3vw;
  background-color: rgb(84, 84, 84);
  padding: 4vw 4vw 4vw 4vw;
}

  /* TEXTOS */
  .form-content{
    text-align: center;
    font-family: 'Archivo Black';
  }
/* Formulário fundo, cor e tamanho - FIM */

/* Botões - COMEÇO */
  .field input,
  .field button{
    margin-top: 1vw;
    height: 6vh;
    width: 100%;
    border: none;
    font-size: 1vw;
  }
  .field input{
    padding: 0 1.5vw;
  }
  
  .title{
    margin-bottom:1vw;
  }
  
  /*Botão de login*/
  .field button{
      color: #fff;
      background-color: rgb(255, 140, 0);
      transition: all 0.3s ease;
      cursor: pointer;
  }
  .field button:hover{
      background-color:rgb(254, 154, 32);
  }
/* Botões - FIM */
  
/* Form cadastro, textos - COMEÇO */
  
  .form-link{
    text-align: center;
    width:100%;
    margin-top: 10px;
  }
  .form-link span,
  .form-link a{
    font-size: 1.2vw;
    font-family:'calibri';
  }
  .form a{
      text-decoration: none;
  }
  .form-content a:hover{
      text-decoration: underline;
  }

/* Form cadastro, textos - FIM */