html {
  font-family: 'Montserrat', 'Noto Sans', sans-serif;
  font-size: var(--root-font-size);
}

body {
	display: flex;
	min-height: 100vh;    
	align-items: center;
  justify-content: center;
  /*overflow: hidden;*/
  background: #E3E1DB;
  padding: 0px;
  margin: 0px;
}

.card {
	flex-direction: column;
	display: flex;
  background: #FBFAF7;
  min-height: 200px;
  padding: var(--default-card-padding);
  border-radius: var(--default-radius);
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  background-color: #FBFAF7;
}

@keyframes fadeIn {
  from {
    opacity: 0;    
  }
  to {
    opacity: 1;    
  }
}

.card-title {
  margin-top: 0px;
  text-align: center; 
  font-weight: var(--default-font-weight);
  font-size: 2rem;
  text-align: center;
  color: var(--primary);
}

@media (min-width: 768px) {
  .card-title {
    font-size: 2rem;    /* 48px on tablet+ */
  }
}

@media (min-width: 1024px) {
  .card-title {
    font-size: 2rem;    /* 64px on desktop */
  }
}

form input[type="text"], form input[type="password"] {
	display: block;
  color: var(--black);
	margin-bottom: var(--default-margin);
	height: 1rem;
	border-radius: var(--default-radius);
	font-size: var(--form-font-size);
  border: 0px solid #f2f2f2;
  padding: 1rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  background-color: var(--white);
  width: 20rem;
  font-family: 'Montserrat', 'Noto Sans', sans-serif;
}

form input[type="submit"] {
  font-size: var(--default-font-size);
  padding: 1rem 2rem 1rem 2rem;
  border-radius: var(--default-radius);
  font-weight: var(--default-font-weight);
  font-family: 'Montserrat', 'Noto Sans', sans-serif;
  border: 0px;
}

form div.form-footer {
  display: flex;
  margin-top: 2rem;
  flex-direction: row;
  justify-content: flex-end;
}

form div.form-footer input[type="submit"].btn {
  background-color: var(--primary);
  color: var(--white);
  cursor: pointer;
}

form div.form-footer input[type="submit"].btn:hover {
  background-color: var(--primary)
}


.img-container{text-align: center; margin-bottom: var(--default-margin)}
.brxe-svg{height: auto; width: 6rem;}