body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

#navbar {
   background-color: var(--web-slate);
   position: static;
}

footer {
   margin-top: auto;
}

#login {
   padding: 3rem 1rem;
   background-color: #ffe4c4;
}

#login form {
   max-width: 500px;
   margin: 0 auto;
   border: 4px solid var(--web-orange);
   border-radius: 80px 8px;
   padding: 2rem;
   /* background-color: #fff; */
}

#login .form-control {
   outline: 0;
   border-color: #555;
   border-width: 2px;
   background-color: transparent;
}

#login .form-control:focus {
   box-shadow: none;
   border-color: #555;
}

#login .submit-btn {
   padding: 8px 20px;
   color: #fff;
   background-color: var(--web-slate);
   width: 100%;
   border: 0;
   outline: 0;
   border-radius: 8px;
   font-weight: 500;
   font-size: 20px;
}

#login .social-signup {
   width: 40px;
   height: 40px;
   font-size: 18px;
   background-color: var(--web-slate);
   color: #fff;
   border-radius: 50%;
   margin: 0 2px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border: 0;
   outline: 0;
}

@media (max-width: 575px) {
   #login form {
      padding: 1rem;
      border-radius: 40px 8px;
   }
}