/* Document settings */
body { 
	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */
}


/* Generell page structure: one color in the center */

.page {
  width: 30vw;								/* free space on left & right side of page */
  margin: 0 auto;							/* place columns horizontally centered */
  min-height: 0; 
}


.login-card { 
  border: 1px solid var(--color-primary);				
}              


/* Area showing ?-Avatar */
.avatar-area {
  padding: 40px;
  background: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;      			     /* place avatar horizontally centered in the card */
}

/* ?-Avatar */
.login-avatar {
  width: 130px; 
  height: 130px;
  font-size: 40px;      
}


/* Input-Area: input-fields for name and password */
.input-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--textcolor-primary);
  padding: 25px;
  background: var(--background-secondary);
}

.input-block label {
  color: var(--textcolor-primary);                      				/* change text color of form's default-text  */
  font-weight: 600;                     			
}
.input-block input {
  margin-top: 7px;
  border: 1px solid var(--color-secondary);
}


/* Submit button and register link */

.submit-block{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
  margin-top: 5px;
}

/* Links */
a {
  color: var(--textcolor-secondary);
  text-decoration: underline;      
}
a:hover { 
	color: var(--textcolor-primary); 
}   

.forgot-pw{
	font-size: 75%;  
	padding-left: 5px;
}

/* Color password-input reveal-eye in white */
#password::-ms-reveal {
  filter: invert(1);
}