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

:root{
  --blue: hsl(223, 87%, 63%);
  --blue-light: hsl(223, 100%, 88%);
  --red: hsl(354, 100%, 66%);
  --gray: hsl(0, 0%, 59%);
  --dark: hsl(209, 33%, 12%);
}

body{
  font-family:'Libre Franklin', sans-serif;
  font-size:20px;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:4rem 1.5rem;
  text-align:center;
  color:var(--dark);
}

.container{
  max-width:700px;
  width:100%;
}

.logo{
  margin-bottom:2rem;
}

h1{
  font-size:48px;
  margin-bottom:1rem;
}

h1 span {
  color: var(--gray);
  font-weight: 300;
}


.subtitle{
  margin-bottom:2.5rem;
  font-size: 20px;
}

form{
  display:flex;
  gap:16px;
  margin-bottom:4rem;
}

.form-group{
  flex:1;
  text-align:left;
}

input{
  width:100%;
  padding: 18px 30px;
  border-radius:50px;
  border:1px solid var(--blue-light);
  font-size:16px;
}

input:focus{
  outline:2px solid var(--blue);
  border-color:transparent;
}

input.error{
  border:2px solid var(--red);
}

small{
  display:none;
  color:var(--red);
  font-size:14px;
  margin-top:8px;
  font-style:italic;
  text-align: left;
}

button{
  padding:18px 60px;
  border:none;
  border-radius:50px;
  background:var(--blue);
  color:white;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(79,125,243,0.4);
  transition:0.2s;
}

button:hover{
  background:hsl(223, 87%, 70%);
  opacity:0.85;
}

.dashboard{
  width:100%;
  margin-bottom:3rem;
}

.socials{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:1rem;
}

.socials a{
  width:45px;
  height:45px;
  border-radius:50%;
  border:1px solid var(--blue-light);
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--blue);
  transition:0.2s;
}

.socials a:hover{
  background:var(--blue);
  color:white;
}

.copyright{
  color:var(--gray);
  font-size:14px;
}

@media(max-width:600px){

   h1{
    font-size:28px;
  }

  form{
    flex-direction:column;
  }

  small {
    text-align: center;
  }

  button{
    width:100%;
  }

  form{
    flex-direction:column;
    gap:12px;
  }

  button{
    width:100%;
  }

  .dashboard{
    margin-top:2rem;
  }

}