@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }

:root {
  --bg: #323031;
  --text: #d8d8d8;
  --dim: #777;
  --line: #4a4849;
  --green: #2fff00;
  --blue: #0d9ddb;
  --lime: #bada55;
  --orange: #ff8100;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; margin: 0; }
a { color: inherit; text-decoration: none; }

nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 2.5rem;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid var(--line);
}

.logo {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.logo span { color: var(--green); }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  color: #aaa;
  font-size: .8rem;
}

.nav-links > span { color: var(--dim); }
.nav-links a:hover { color: #fff; }
.active-intelligence { color: var(--blue) !important; }
.active-security { color: var(--lime) !important; }
.active-makers { color: var(--orange) !important; }

.content {
  width: min(720px, 100%);
  padding: 2.5rem 2.5rem 6rem;
}

.content p,
.content li,
.content blockquote,
.content h2,
.content h3,
.content pre,
.content code { font: inherit; }

.content p { margin: 0 0 1.75rem; }

.content h2,
.content h3 {
  margin: 0 0 1.75rem;
  color: #f0f0f0;
  font-weight: 500;
}

.content h2::before,
.content h3::before { content: '* '; }

.content hr {
  width: 100%;
  height: auto;
  margin: 0 0 1.75rem;
  overflow: hidden;
  border: 0;
  color: var(--dim);
  white-space: nowrap;
}

.content hr::after { content: '========================================'; }

.content ul,
.content ol {
  margin: 0 0 1.75rem;
  padding-left: 2rem;
}

.content blockquote {
  margin: 0 0 1.75rem;
  padding: 0;
  color: inherit;
}

.content a {
  text-decoration: underline;
  text-decoration-color: #777;
  text-underline-offset: 2px;
}

.content a:hover { text-decoration-color: var(--green); }
.content strong { color: #f0f0f0; font-weight: 500; }

.hero {
  min-height: 55vh;
  display: flex;
  align-items: flex-start;
  padding: 5rem 0 0 6rem;
}

iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.75rem;
  border: 0;
}

img { max-width: 100%; height: auto; }

footer {
  margin-top: 5rem;
  color: var(--dim);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); }

@media (max-width: 540px) {
  html { font-size: 13px; }

  nav {
    padding: 1rem 1.1rem;
    gap: .5rem;
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links > span { display: none; }
  .nav-links { gap: .3rem 1rem; }
  .content { padding: 2rem 1.1rem 4rem; }
  .hero { min-height: 45vh; padding: 4rem 0 0 1.5rem; }
}