:root{
  --hn-orange:#ff6600;
  --hn-bg:#f6f6ef;
  --hn-text:#000;
  --hn-muted:#828282;
  --hn-link:#0000ff;
}

.hn-comment{
  font-family: Verdana, Geneva, sans-serif;
  font-size:14px; line-height:1.35;
  color:var(--hn-text); background:var(--hn-bg);
  border:1px solid var(--hn-orange);
  padding:6px 8px 8px 8px;
  margin: 2em auto 2em auto;
  max-width: 80%;
}
.hn-comment.hn-nested{ margin-left:28px; position:relative; }
.hn-comment.hn-nested::before{
  content:""; position:absolute; left:-16px; top:10px; bottom:10px;
  width:2px; background:#e0e0d0;
}
.hn-comment.hn-collapsed .hn-body{ display:none; }

.hn-meta{ display:flex; align-items:center; gap:6px; margin-bottom:6px;
color:var(--hn-muted); font-size:12px;
background:var(--hn-bg);
}

.hn-sep{ color:var(--hn-muted); margin:0 2px; }
.hn-user,.hn-small,.hn-footer a{ color:var(--hn-muted); text-decoration:none; }
.hn-user:hover,.hn-small:hover,.hn-footer a:hover{ text-decoration:underline; }

.hn-vote{
  width:0; height:0; margin-right:2px; transform:translateY(-1px);
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:8px solid var(--hn-muted);
}
.hn-vote:hover{ border-bottom-color:var(--hn-orange); cursor:pointer; }

.hn-body { padding-left: 1.5em;}
.hn-body p{ margin:6px 0; }
.hn-body a{ color:var(--hn-link); text-decoration:none; }
.hn-body a:hover{ text-decoration:underline; }

.hn-footer{ margin-top:6px;
    padding-left: 1.6em;
    font-size: 0.8rem;
background-color:var(--hn-bg)}
}
.hn-reply{ font-size:12px; }

@media (prefers-color-scheme: dark){
  :root{ --hn-bg:#222220; --hn-text:#f4f4f4; --hn-muted:#b0b0b0; --hn-link:#81a1ff; }
  .hn-comment.hn-nested::before{ background:#3a3a36; }
}

@media (max-width: 760px) {
    .hn-meta{
        font-size: 0.7rem;
    }
    .hn-comment {
        font-size: 0.8rem;
        max-width: 90%;
    }
}