body{
  background-image: url("/images/people.png"); 
  background-position: center;
  color: white;
  min-height: 100vh;
}

.login-form {
  width: 25rem;
  max-width: 90%;
  margin: auto;
  display: block;
  margin-top:2%;
  padding: 25px;
  padding-top: 10px;
  border-radius: 20px;
  position: relative;
   background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(20px);
  box-shadow: 1px 1px 10px grey;
}

.login-form:hover{
  background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(15px);
  /* background: rgba(255, 255, 255, .1); */
}

.signin-form:hover{
  background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(20px);
}

.seller-form:hover{
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(20px);
}

.signin-form {
  width: 25rem;
  max-width: 90%;
  margin: auto;
  display: block;
  margin-top:1%;
  padding: 25px;
  padding-top: 10px;
  border-radius: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(35px);
  box-shadow: 1px 1px 10px grey;
}

.seller-form {
  width: 35rem;
  max-width: 90%;
  margin: auto;
  display: block;
  margin-top:1%;
  padding: 25px;
  padding-top: 10px;
  border-radius: 20px;
  position: relative;
   background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(35px);
  border: 1px solid #001f3f;
}

.seller-form:hover{
  box-shadow: 3px 3px 25px #9e9c9c;
}

.image-logo{
  text-align: center;
}

.image-logo img{
  width: 9rem;
  height: 9rem;
  margin:auto;
  padding: 2rem;
}

.form-control input,
.form-control textarea {
  display: inline-block;
  width: 50%;
  margin: auto;
  margin: 0.5rem 0.5rem;
  box-shadow: 1px 1px 5px #dfdede;
}

.form-control select{
  display: inline-block;
  width: 50%;
  height: 1.5rem;
  margin: auto;
  margin: 0.5rem 0.5rem;
  box-shadow: 1px 1px 5px #dfdede;
}

.form-control input,
.form-control select,
.form-control textarea{
  box-shadow: 1px 1px 5px grey;
}

.form-control input,
.form-control select,
.form-control textarea {
  border: 1px solid #797d7f;
  font: inherit;
  border-radius: 4px;
  background: white;
}

.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus,
.btn:focus {
  outline:none;
  outline-color : #001f3f;
  border: 1px solid #001f3f;
}

.form-control input.invalid,
.form-control select.invalid,
.form-control textarea.invalid {
  border-color: red;
}

.form-control label{
  display: inline-block;
  color : white;
  font-weight: bold;
  width: 8rem;
  text-align: right;
}

.form .form-control label,
.seller-form .form-control label{
  color: black;
}

.signIn{
  color:white;
}


@media (max-width: 768px) {

body{
  min-height: 100vh;
}

.form-control input,
.form-control textarea {
  display: inline-block;
  width: 100%;
  /* margin: auto; */
  margin: 0.5rem 0.5rem;
  box-shadow: 1px 1px 5px grey;
}

.form-control select{
  display: inline-block;
  width: 100%;
  height: 1.5rem;
  /* margin: auto; */
  margin: 0.5rem 0.5rem;
  box-shadow: 1px 1px 5px grey;
}

.form-control label {
  display: block;
  text-align: left;
}

.image-logo img {
  width: 10rem;
  margin: auto;
  padding: 2rem;
}

.login-form {
   margin-top: 30%;
}  

.signin-form {
  margin-top: 30%;
}

.seller-form {
  width: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
  margin-top:1%;
  padding: 25px;
  padding-top: 10px;
  border-radius: 20px;
  position: relative;
   background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(35px);
  border: 1px solid #001f3f;
}

main{
  margin: 0rem !important;
}


}