* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #8D99AE;
  width: 100vw;
  height: 100vh;
}

.navClass {
  background-color: #8D99AE;
  opacity: .6;
  border-bottom: 2px solid #6D2E46;
  color: white;
}

li a {
  color: white !important;
  font-weight: 600 !important;
}

.pageBackground {
  background-color: #8D99AE;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1vh, 2vh, 4vh) 0;
}

.btn {
  background-color: #6D2E46;
  color: #fff;
}

#submit:hover,
.btn:hover {
  background-color: #6D2E46;
  color: #fff;
}

.formCard {
  color: white;
  border: 2px solid white;
  padding: clamp(0.8rem, 3vw, 2rem);
  border-radius: 10px;
  width: min(90%, 500px);
  margin: 0 auto;
}

.signInHeader {
  color: white;
  text-align: center;
  padding-top: clamp(15px, 3vh, 30px);
}

.pageImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: clamp(120px, 20vw, 300px);
  height: auto;
  aspect-ratio: 1;
}

.error {
  text-align: center;
  color: white;
  font-size: clamp(1em, 2vw, 1.5em);
  padding-top: clamp(10px, 2vh, 20px);
}

.mb-3 {
  margin-bottom: clamp(0.5rem, 2vh, 1rem) !important;
}

@media screen and (max-height: 667px) {
  .pageImg {
    height: 15vh;
    min-height: 80px;
    max-height: 100px;
    max-width: 100px;
    min-width: 80px;
  }
  
  .formCard {
    padding: 0.8rem;
  }
  
  .mb-3 {
    margin-bottom: 0.5rem !important;
  }


}