@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 1000;
}


.container {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)), url(../img/459-background.png);
  background-position: center;
  background-size: cover;
  position: relative;
}

.form-box {
  width: 90%;
  max-width: 450px;
  position: absolute;
  top: 50%;
  left : 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding : 50px 60px 70px;
  text-align: center;
  border-radius: 10px;
}

.form-box h1 {
  font-size: 30px;
  margin-bottom: 60px;
  color: #4DBABC;
  position: relative;
}

.form-box h1::after {
  content: '';
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: #4DBABC;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.input-field{
  background : #f5f5f5;
  margin : 15px 0;
  border-radius : 3px;
  display: flex;
  align-items: center;
}

input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 18px 15px;
}

.input-field i {
  margin-left: 15px;
  color : #999;
}

.btn-field{
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-field button {
  flex-basis: 48%;
  background: #4DBABC;
  color: #fff;
  height : 40px;
  border-radius: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background 1s;
  margin-right: 10px;
}

  .alert-danger{
    padding: 10px;
    color: #D8000C;
    font-weight: bold;
    background-color: #FFBABA;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    margin-bottom: 50px;
  }

  .mb-3{
    padding: 10px;
    color: #4F8A10;
    font-weight: bold;
    background-color: #DFF2BF;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    margin-bottom: 50px;
  }


  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 1) {  
    .form-box {
      width: 90%;
      max-width: 450px;
      height: auto;
      padding: 8% 10%;
    }
  
    .form-box h1 {
      font-size: 4vw;
      margin-bottom: 5vw;
    }
  
    .input-field {
      margin: 3% 0;
    }
  
    input {
      padding: 5% 3%;
      font-size: 3vw;
    }
  
    .btn-field {
      flex-wrap: wrap;
    }
  
    .btn-field button {
      font-size: 3vw;
      flex-basis: 100%;
      margin: 3% 0;
    }
  
    .alert-danger,
    .mb-3 {
      padding: 3%;
      font-size: 3vw;
      margin-bottom: 5vw;
    }
}