:root {
  --text-color: black;
  --text-color-alternate: grey;
  --background-color: rgb(248, 248, 248);
  --background-color-light: lightgrey;
  --color-error: darkred;
  --color-warning: darkorange;
  --color-valid: mediumseagreen;
  --padding: 1vmin;
}

html {
  font-family: sans-serif;
  background-color: var(--background-color);
  height: 100%;
  margin-left: var(--padding);
  margin-right: var(--padding);
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-color-alternate);
}

header > div {
  margin-left: var(--padding);
  display: flex;
  flex-direction: column;
}

header, section {
  overflow: hidden;
}

h1, p, pre {
  overflow: hidden;
  text-overflow: ellipsis;
}

pre {
  max-width: 100%;
  font-size: .75rem;
  color: var(--color-error);
}

p {
  margin: 0;
  padding: 0;
  font-size: 90%;
}

h1 {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

header > * {
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  padding: 0;
}

header > div {
  margin-left: var(--padding);
}

header > img {
  margin-right: var(--padding);
  max-height: 10vmin;
}

header > div > h1 {
  font-size: 4vmin;
}

header > div > p {
  font-size: 3vmin;
}

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: var(--padding);
  display: flex;
  flex-direction: column;
}

body > section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

body[data-fetching-status="fetching"] > #fetching {
  display: flex;
}

body[data-fetching-status="error"] > #error {
  display: flex;
}

body[data-fetching-status="ready"] > #ready {
  display: grid;
}

#update-time {
  display: none;
}

#ready {
  grid-template-columns: 100%;
  grid-template-rows: 10vh 10vh 10vh auto;
  grid-gap: var(--padding);
  font-size: 5vh;
  text-align: center;
  align-items: stretch;
}

#ready > input {
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;
}

#ready > p {
  margin: auto;
  white-space: nowrap;
}

#member[data-status=""] {
  visibility: hidden;
}

#member[data-status="true"] {
  color: var(--color-valid);
}

#member[data-status="false"] {
  color: var(--color-warning);
}

#member[data-status="false"] > #member-active {
  display: none;
}

#member[data-status="true"] > #member-not-active {
  display: none;
}

#private {
  font-size: 3vmin;
}

#private[data-private=""] {
  display: none;
}

#private[data-private="true"] {
  display: block;
}

#keyboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--padding);
}

#keyboard > div {
  user-select: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--background-color-light);
}

button[data-value="cancel"] {
  background-color: var(--color-warning);
}

button[data-value="done"] {
  background-color: var(--color-valid );
  visibility: hidden;
}

button:active {
  background-color: grey;
}