/* New style to match the dark, monospaced, neon-green look */

:root{
  --bg: #0b1214;
  --panel: #0f1718;
  --muted: #6f7b7b;
  --text: #cfe6e6;
  --accent: #832aa8;
  --accent-dim: #00cc5e;
  --rule: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding:48px 24px;
}

.site{
  max-width:980px;
  margin:0 auto;
}

/* Header */
header{
  margin-bottom:28px;
}
h1{
  font-size:48px;
  margin:0 0 8px 0;
  letter-spacing:0.6px;
  color:var(--text);
}
.subtitle{
  margin:0;
  color:var(--muted);
  font-size:14px;
  letter-spacing:1px;
  text-transform:lowercase;
}

/* subtle rule */
header hr{
  margin:24px 0;
  border:0;
  height:1px;
  background:var(--rule);
}

/* Main content */
main .intro p{
  color:var(--text);
  opacity:0.95;
  font-size:16px;
  max-width:70ch;
  margin:0 0 28px 0;
  white-space:pre-wrap;
}

/* Section title */
h2{
  font-size:30px;
  margin:18px 0 14px 0;
  color:var(--text);
  letter-spacing:0.8px;
}

/* List styles */
ul{
  padding-left:28px;
  margin:0;
}
li{
  margin:10px 0;
  font-size:18px;
  line-height:1.4;
  list-style: disc;
  list-style-position: outside;
}
a{
  color:var(--accent);
  text-decoration:none;
  transition:color .15s ease, transform .12s ease;
}
a:hover{ color:var(--accent-dim); transform:translateX(2px); }

/* footer */
footer{
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:13px;
}

/* smaller screens */
@media (max-width:600px){
  h1{font-size:36px}
  h2{font-size:22px}
  body{padding:28px 16px}
}