
body {
  padding-top: 10rem;
  max-width: 48rem;
  margin: auto;
}

nav {
  color: var(--light); display: flex; align-items: center; padding: 0 0.5rem;
}
nav a { color: var(--light); }
nav a:hover { color: var(--white); }
nav h1 { flex: auto; margin: 0; color: var(--light)}
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul { display: flex; list-style: none; margin: 0; padding: 0;}
nav ul li a, nav ul li span, nav ul li form, header .action {
  display: block;
  padding: 0.5rem;
}

.content {
  padding: 0 1rem 1rem;
}
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
.flash {
  margin: 1em 0; padding: 1em; background: var(--light);
  border: 1px solid var(--primary);
}
.content-login {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.form-login {
  width: 100%;
  max-width: 330px;
}
.form-login .form-control {
  padding: 10px;
  font-size: 16px;
}

/* table styling */
table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: 100%;
  overflow: auto;
}
table th { font-weight: 600; }
table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }
