/* /assets/css/site.css */
:root{
  --page-bg:#000; /* page background */
  --frame-bg:#08090a;  /* content slab */

  --text:#00aeef;   /* cyan */
  --link:#ff2bd6;   /* pink */
  --rule:#222;
  --maxw:1024px;
}

html{ color-scheme: dark; }

body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:1.6;
}

.frame{
  width:var(--maxw);
  max-width:100%;
  margin:0 auto;
  padding:16px 12px 40px;
  background:var(--frame-bg);
}

.banner img{
  display:block;
  width:100%;
  height:auto;
}

/* Mobile: prevent tiny banner edge clip */
@media (max-width: 1040px) {
  .frame{
    padding-left: 0;
    padding-right: 0;
  }
}

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:14px 0;
}

.menu{
  text-align:center;
  font-size:16px;
  letter-spacing:.02em;
}

.menu a{
  color:var(--link);
  text-decoration:none;
  padding:0 10px;
}

.menu a:hover,
.menu a:focus{
  text-decoration:underline;
}

.sep{
  color:var(--text);
  opacity:.6;
}

.content h1,
.content h2,
.content h3{
  color:var(--link);
  margin:0 0 10px 0;
}

.content p{
  margin:0 0 12px 0;
  max-width:95%;
  margin-bottom:1.1em;
}

/* In-text links */
.content a{
  color:var(--link);
  text-decoration:none;
}

.content a:hover,
.content a:focus{
  text-decoration:underline;
}

.content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:12px auto;
}

.footer{
  margin-top:28px;
  font-size:13px;
  opacity:.7;
}