*{
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic';
}
.container{
  margin-top:20px; 
}
.user{
  width: 170px;
  display:block;
  margin: auto; 
}
.title{
  text-align: center;   
}


.form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 5px;
}

.form div {
  position: relative;
  margin-bottom: 15px;
}

/**
* ! style rules for form icons
**/

.form div i {
  position: absolute;
  padding: 10px;
}

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

/**
* ! Media Queries are here
**/

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .form,
  .content {
    width: 100%;
  }
}

@media (max-width: 425px) {
  .form {
    padding: 20px;
  }
}

.main_button {
  background-color: #184e77;
  width: 100%; 
  padding: 10px; 
  font-size: 15px;
  color: white;
  border: 0;
  cursor: pointer;
  border-radius: 5px;  
}
.main_button:hover{
  background-color: #7FB3D5; 
}

.card-img-top{
  width: 100%;
  height: 100%;    
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}