.header {
  background: rgba(21, 21, 26, .96);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(21, 21, 26, .16);
}

.header .brand,
.header nav a,
.header .admin-link {
  color: white;
}

.header .brand b {
  color: #c9f45a;
}

.header .brand-mark {
  background: #c9f45a;
  color: #15151a;
}

.header nav a::after {
  background: #c9f45a;
}

.header .admin-link {
  border-color: rgba(255, 255, 255, .65);
}

.header .admin-link span {
  color: #c9f45a;
}

.sites-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(201, 244, 90, .12), transparent 28%),
    linear-gradient(135deg, #33286f 0%, #211b45 54%, #19172d 100%);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(201, 244, 90, .22);
}

.sites-section .section-kicker {
  color: #c9f45a;
}

.sites-section .section-heading > p {
  color: #d5d1ec;
}

.topic-section {
  padding: 100px 0;
  background: #e9e6df;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.topic-card {
  min-height: 300px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: .25s;
  position: relative;
  overflow: hidden;
}

.topic-card:hover {
  transform: translateY(-7px);
  box-shadow: 10px 10px 0 #15151a;
}

.topic-card.purple { background: #6047f5; color: white; }
.topic-card.lime { background: #c9f45a; }
.topic-card.paper { background: white; }
.topic-index { font: 800 9px ui-monospace, monospace; letter-spacing: .12em; opacity: .65; }
.topic-card i { font-style: normal; font-size: 52px; margin: 38px 0 16px; }
.topic-card h3 { font-size: 23px; margin: 0 0 10px; }
.topic-card p { font-size: 12px; line-height: 1.8; opacity: .72; margin: 0; }
.topic-card b { font-size: 11px; margin-top: auto; border-bottom: 1px solid; padding-bottom: 4px; }
.topic-card.purple b { color: #c9f45a; }

@media (max-width: 900px) {
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { min-height: 250px; }
}

@media (max-width: 560px) {
  .topic-section { padding: 75px 0; }
}
