body {
  margin: 0 auto;
  max-width: 72rem;
  padding: 1rem;
}

header,
main,
footer {
  margin-block: 1rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  margin-block: 1rem;
  width: 100%;
}

caption {
  font-weight: 700;
  margin-block-end: .5rem;
  text-align: left;
}

th,
td {
  border: 1px solid #ddd;
  padding: .5rem;
  text-align: left;
  vertical-align: top;
}

thead th,
tbody th {
  background: #f6f6f6;
}

form {
  margin-block: 1rem;
}

label {
  display: block;
  font-weight: 700;
  margin-block-end: .25rem;
}

input {
  box-sizing: border-box;
  max-width: 32rem;
  width: 100%;
}

button,
input {
  font: inherit;
}

.form-field {
  margin-block-end: 1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.actions form {
  margin: 0;
}

[role="alert"] {
  color: #900;
}

.sign-out {
  display: inline;
  margin: 0;
}

.sign-out button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}