html { min-height: 100%; background-color: #000; font-size: 18pt; }
body {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px;
  background: #000;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 1em;
  line-height: 1.625;
}
header, footer { text-align: center; }
.logo { display: block; width: min(310px, 80vw); height: auto; margin: 0 auto 16px; }
main { margin: 24px 0; }
h1 {
  margin: 0 0 16px;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: .325rem;
  text-transform: uppercase;
}
p { margin: 10px 0; }
a { color: #fff; }
.social { margin: 18px 0 30px; }
.placeholder { color: #bbb; }
.coc { line-height: 1.65; }
footer { margin: 30px 0 12px; }
nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
nav { font-size: .625em; letter-spacing: .225rem; text-transform: uppercase; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px) {
  html { font-size: 11pt; }
  h1 { letter-spacing: .284375rem; }
}
@media (max-width: 500px) { body { padding: 16px; } }