body {
    background-image: url("background.jpg");
}
.container {
  width: 500px;
  height: 450px;
/*  Pour centrer le contenu d'un bloc  on utilise la prop text-align  */
  text-align: center; 
/*  Pour centrer un bloc on doit d'abord préciser le width et utiliser ensuite la prop margin  */
  margin : auto;
  background-color: rgba(68, 75, 84,0.8);
  margin-top: 150px;
  border-radius: 5px;
}
img {
  width: 150px;
  height:150px;
  border-radius:50%;
  margin-top:-70px;
  margin-bottom: 30px;
}
 input {
  height: 40px;
  width: 300px;
  font-size: 18px;
  font-family: "Lato";
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 35px;
}
.form-input {
  position:relative;
}
.fa-lock, .fa-user {
  position:absolute;
  top: 8px;
  left: 88px;
  color:#3BA8A5;
}

#submit {
  width: 80px;
  height: 40px;
  padding: 5px;
  background-color: #D6D6D6;
  border-style: none;
  margin-top: 30px;
  margin-bottom: 30px;
}
#submit:hover {
  cursor: pointer;
  background-color: #575C56;
  color: white;
}
a {
  color: white;
}

#forgotPassword {
  margin-top: 10px;
  background-color: #3BA8A5;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
#forgotPassword:hover {
  background-color: #2F7D7C;
}

/* Media Query for Desktop */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 60%;
        margin-top: 100px;
    }
}

/* Media Query for Phones */
@media only screen and (max-width: 767px) {
    /* Add styles here to adjust for smaller screens like phones */
    .container {
        width: 90%;
        margin-top: 100px;
    }
}