body {
  font-family: 'Nunito Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    'wdth' 100,
    'YTLC' 500;
  color-scheme: light dark;
  overflow-wrap: break-word;

  --background-color: light-dark(white, #121212);
  background: var(--background-color);

  --text-color: light-dark(black, #e0e0e0);
  color: var(--text-color);
}

header h1 {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body {
  --body-padding: 20px;

  max-width: 800px;
  margin: 0;
  padding: var(--body-padding) var(--body-padding) 0;
}

@media (max-width: 480px) {
  body {
    --body-padding: 10px;
  }
}

@media (min-width: 600px) {
  body {
    min-width: 600px;
    max-width: 800px;
    margin: 0 auto;
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#logout-link {
  text-decoration: none;
}