/* 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; 
}

.topbar {
  background: var(--color-primary);  /* blue background, old: rgb(99,120,255)*/
  color: var(--textcolor-primary);	 /* text color white */  
  padding: 10px 16px;         					   /* padding around content on all sides */
  display: flex;
  text-align: center;  
  font-size: clamp(10px, 3vw, 20px); 
  font-weight: 600;
}

.reset-card { 
  border: 2px solid var(--color-primary);				
}              


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


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

.question-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--textcolor-primary);
  padding: 25px;
  background: var(--background-secondary);
}

[inert] { 
  opacity:.25; 
  filter:grayscale(1);
}


.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);
}

/* Area showing ?-Avatar */
.question-box {
  padding: 15px;
  background: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;      			     /* place text horizontally centered in the card */
  font-size: 110%;
}


/* Submit buttons */

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