@charset 'UTF-8';

@font-face {
  font-family: animation;
  src: url('../../font/Insanibc.ttf') format(opentype);
}

*{
  margin: 0;
  padding: 0;
}

:root{
  --font-text-btn: 1.1em;
  --margin-top-fgt-pass: 18px;
  --border-color-div-input: #bbbbbb80;
}

body{
  background-color: #F4F4F5;
}

section{
  margin-top: 8%;
}

h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font-size: 2.1em;
}

form{
  width:36%;
}

/* Div que envolve os inputs do form */
.div-input{
  border: 2px solid var(--border-color-div-input);
  border-radius: 20px;
  background-color: white;
  padding-right: 20px;
}

.div-input:focus-within{
  --border-color-div-input: #2571ff98;
}

/* Inputs do form */
input{
  width: 100%;
  height: 3.2em;
  border: 0px;
  outline: none;
  border-radius: 20px;
}

input::placeholder{
  color: rgba(82, 82, 82, 0.607);
  font-weight: 500;
}

.btn-width{
  width: 100%;
}

button{
  font-family: animation;
  font-weight: 200;
  color: rgba(0, 0, 185, 0.478);
  font-size: var(--font-text-btn);
  height: 2.8em;
  width: 100%;
  border: none;
  border-radius: 20px;
  background-color: #87e1ff;
  box-shadow: 0px 4px #33ccff;
}

button:active{
  transition: 0.3s;
  margin-top: 4px;
  box-shadow: none;
  width: 99.8%;
  --font-text-btn:1.07em;
}

.fgt-pass{
  width: 37%;
  margin-top: 18px;
  font-style: solid;
}

div a{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-decoration: solid;
  font-size: 1.1em;
}

/* Texto da mensagem quando houver erro */
.div-error{
  padding: 10px;
}

span{
  color: black;
  font-weight: 500;
}

.color-error{
  color: #e20000;
}