*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.main-container {
  display: flex;
  justify-content: center;
  background-color: #f0f2f5;
}

.main-section {
  width: 61.25rem;
  height: 33.5rem;
  display: flex;
  margin: 4.5rem 0 7rem 0;
  padding: 1.25rem 0.25rem 0 0;
}

.lf-container {
  width: 36.25rem;
  height: 18.625rem;
  display: flex;
  flex-direction: column;
  padding: 0 5rem 0 0;
}

.fb-img {
  width: 18.813rem;
  margin: 5.25rem 0 -0.5rem -1.75rem;
}

.lf-p {
  height: 7.25rem;
  font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
  font-size: 1.75rem;
  line-height: 2rem;
}

.rh-container{
  width: 24.75rem;
  height: 28.5rem;
  margin-top: 2.5rem;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 21.813rem;
  background: #fff;
  padding: 1rem 1rem 1.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

.input-form {
  width: 100%;
  background: #FFFFFF;
  font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
  font-size: 1.063rem;
  border-radius: 0.375rem;
  border: 1px solid #dddfe2;
  color: #1d2129;
  padding: 0.938rem 1rem;
  margin: 0 0 0.75rem 0;
}

.input-form::placeholder {
  color: #90949c;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.063rem;
}

.input-form:focus {
  outline: none;
  border-color: #1b74e4;
  box-shadow: 0 0 0 2px #e7f3ff;
  caret-color: #1b74e4
}

.input-form:focus::placeholder {
  color: #bec3c9;
}

.login-btn {
  color: white;
  background-color: #1877f2;
  border: none;
  border-radius: 0.375rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 3rem;
  width: 100%;
  margin: 0.25rem 0 1.063rem 0;
  padding: 0 1rem;
}

.login-btn:hover {
  background-color: #166fe5;
}

.form-container a {
  color: #1877f2;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.form-container a:hover, .form-container a:focus{
  text-decoration: underline;
}

.form-container div {
  width: 100%;
  border-bottom: 0.063rem solid #dadde1;
  display: flex;
  margin: 1.313rem 0 1.625rem;
  text-align: center;
}

.form-container .new-account-btn {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.063rem;
  font-weight: bold;
  background-color: #42b72a;
  border-color: #42b72a;
  border: none;
  border-radius: 0.375rem;
  line-height: 3rem;
  padding: 0 1rem;
  color: #fff;
  text-decoration: none;
}

.form-container .new-account-btn:hover {
  background-color: #36a420;
  border-color: #36a420;
  text-decoration: none;;
}

.rh-container p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: normal;
  text-align: center;
  color: #1c1e21;
  margin-top: 1.75rem;
  line-height: 1.34;
}

.rh-container p a{
  font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1e21;
}

footer {
  height: 9.813rem;
  background: #fff;
  margin: 0 13.25rem 0;
  padding-top: 1.25rem;
}

footer .links-footer-container {
  display: flex;
  justify-content:start;
  align-items: center;
  padding-top: 0.5rem;
}

footer a {
  font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  color: #8a8d91;
  text-decoration: none;
  padding-right: 0.625rem;
  line-height: 1rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.btn-more-links {
  background-color: #f5f6f7;
  border: 0.063rem solid #ccd0d5;
  padding: 0rem 0.5rem;
  border-radius: 0.1rem;
  color: #4b4f56;
  font-size: 1rem;
  font-weight: bold;
}

.btn-more-links:hover {
  background-color: #eff1f3;
  border-color: #bec3c9
}

@media (max-width: 912px) {
  .main-container {
    width: auto;
    height: 45rem;
  }
  
  .main-section {
    width: 37.313rem;
    height: 33.5rem;
    margin: 0.75 auto 7rem;
    flex-direction: column;
    padding: 0;
  }

  .lf-container {
    width: 25rem;
    justify-content: center;
    align-items: center;
    padding: 0 ;
    margin: 0 auto;
  }

  .fb-img {
    margin: 0 auto;
  }

  .lf-p {
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 1.75rem;
    text-align: center;
    margin-top: -0.25rem;
  }

  .rh-container {
    padding: 0.625rem 0 5.375rem;
    margin: 1.875rem auto 0;
  }

  .rh-container p {
    margin: 1.75rem 0 1.25rem;
  }

  footer {
    height: 13.25rem;
    margin: 0 2.5rem;
  }

  footer .links-footer-container {
    flex-wrap: wrap;
  }
}