index.css

html, body
{
  background-color: white;
}

html, body, input, button, a.account
{
  color: black;
  font-family: sans-serif;
  font-size: 16px;
  text-decoration: none;
}

form
{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

input
{
  width: 400px;
}

p:first-child
{
  margin-top: 0;
}

p:last-child
{
  margin-bottom: 0;
}

#progress
{
  display: flex;
  flex-direction: row;
  align-items: center;
}

#progress.done:not(.error)
{
  display: none;
}

#progress.error
{
  color: red;
}

#progress.error > #in-progress
{
  display: none;
}

#progress:not(.error) > #error
{
  display: none;
}

#progress-label
{
  margin-inline-start: 1em;
}

.account
{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5em 0;
}

.account:not(:first-child)
{
  border-top: 1px solid #ccc;
}

.account > .avatar
{
  max-width: 46px;
  max-height: 46px;
  border-radius: 4px;
  margin-inline-end: 1em;
}

.account > .name-container
{
  display: flex;
  flex-direction: column;
}

.account .name
{
  font-weight: bold;
}

.account .note
{
  font-size: 80%;
}