.root {
  max-width: 512px;
  margin: auto;
  padding: var(--spacing-normal);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.footer {
  margin: 0.5em 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.footer a {
  margin: 0 1em;
  border: 1px solid var(--color-border);
  padding: 0.1em 0.5em;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 3px;
}

.dashboard {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--spacing-compact);
}

@media (min-width: 475px) {

  .root {
    padding: calc(var(--spacing-normal) * 2);
  }

  .dashboard {
    grid-gap: var(--spacing-normal);
  }

  .footer {
    margin-top: 1em;
  }

  .footer a {
    padding: 0.2em 0.5em;
  }
}