body {
  max-width: 1280px;
  margin: 0px auto;
}

body > header {
  display: flex;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  margin: 0 0 24px 0;
  padding: 0;
  box-shadow: var(--box-shadow-m);
  line-height: 48px;
}

.logo a {
  padding: 0 24px;
  background: rgba(var(--color-red-500), 1);
  color: rgba(var(--color-grey-00), 1);
  font-size: var(--font-size-40);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--box-shadow-m);
}

body > header .server {
  font-weight: 400;
  display: block;
  font-size: 1rem;
  line-height: 48px;
  padding: 0 24px;
  margin: 0 0 24px 0;
  background: rgba(var(--color-grey-00), 1);
  box-shadow: var(--box-shadow-m);
}

.logo a:hover {
  background: rgba(var(--color-red-600), 1);
  color: rgba(var(--color-grey-00), 1);
}

body > header nav {
  display: flex;
  flex-wrap: wrap;
  line-height: 48px;
  margin: 0 0 24px auto;
  background-color: rgba(var(--color-grey-00), 1);
  box-shadow: var(--box-shadow-m);
}

body > header nav a:any-link {
  padding: 0 24px;
  font-weight: 500;
  font-size: var(--font-size-40);
  letter-spacing: 0.05em;;
  text-decoration: none;
  text-transform: uppercase;
}

body > header nav a:any-link.active,
body > header nav a:any-link.active:hover,
body > header nav a:any-link.active:focus {
  background: rgba(var(--color-red-500), 1);
  color: rgba(var(--color-grey-00), 1);
  cursor: initial;
  box-shadow: var(--box-shadow-m);
}

/* main */

main * + * {
  margin-top: 24px;
}

/* table */

table,
th,
tr {  
  width: 100%;
}

tbody tr:nth-child(even) {
  background: inherit;
}

th {
  white-space: nowrap;
}

td {
  color: rgba(var(--color-grey-700), 1);
  font-family: var(--font-mono);
}

td small {
  font-size: var(--font-size-40);
  color: rgba(var(--color-grey-400), 1);
}

th,
td.key {
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-40);
  letter-spacing: 0.05em;
  color: rgba(var(--color-grey-500), 1);
}

td.key {
  width: 30%;
  word-break: break-all;
  white-space: normal;
}

td.key.no-transform {
  text-transform: none;
}

td.date {
  white-space: nowrap;
}

td.wrap {
  word-break: break-all;
  white-space: normal;
}

/* card */

.card {
  overflow-x: auto;
  border-radius: 0;
  padding: var(--space-3x);
}

.card p {
  max-width: none;
}

.card > * + * {
  margin-top: 24px;
}

.card table {
  margin: -24px; 
  min-width: calc(100% + 48px);
  outline-style: none;
}

.card * + table {
  margin: 0 -24px -24px;
}

table li {
  margin-top: 0;
  list-style-type: none;
}

.card div .label {
  color: rgba(var(--color-grey-500), 1);
  text-transform: uppercase;
  font-size: var(--font-size-30);
  letter-spacing: 0.05em;
  font-weight: 500;
  display: block;
}

/* footer */

body > footer {
  margin-top: 24px;
  font-size: var(--font-size-40);
  padding: 0 24px;
}

body > footer p {
  max-width: none;
}