#form {
  background-color: var(--clr-primary-container);
  color: var(--clr-on-primary-container);
  padding: var(--pad-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 300px;
  height: 100%;
  flex-grow: 1;
  justify-content: center;
  gap: 1em;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.update {
  display: flex;
  flex-direction: column;
}

.panel > div {
  flex-grow: 1;
}

#login {
    color: var(--clr-accent);
    text-align: center;
}

/*This makes the form hidden at the start (the first section is made visible by the currentStep function)*/
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
}