body {
    margin: 30px auto;            /* Center it */
    padding: 15px;                /* make it not hit sides of the browser on small phones */
    background-color: #23262c;
    color: white;                
    font-size: 150%;             /* Smaller type works well for print, not the screen. */
    max-width:650px;             /* If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book. */
    font-family: monospace;
}
a {
   text-decoration: none;        /* No <strike>*/
} 
a:link    {color: #FF4DA8;}   /* unvisited link */
a:visited {color: #FF4DA8;}   /* visited link */
a:hover   {color: #C259FF;}         /* mouse over link */
a:active  {color: red;}          /* selected link */
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* bluesky comments */
.bsky-comments h3 { margin-bottom: 0.2em; }
.bsky-meta, .bsky-handle, .bsky-date, .bsky-stats, .bsky-empty { color: #9aa0a8; font-size: 0.8em; }
.bsky-replies { list-style: none; padding-left: 0; margin: 0; }
.bsky-replies .bsky-replies { padding-left: 0.9em; border-left: 2px solid #3a3e46; margin-top: 0.6em; }
.bsky-reply { margin: 0 0 1em 0; }
.bsky-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35em; font-size: 0.85em; }
.bsky-avatar { width: 24px; height: 24px; border-radius: 50%; }
.bsky-name { font-weight: bold; }
.bsky-text { margin: 0.25em 0; white-space: pre-wrap; word-wrap: break-word; }
.bsky-embed, .bsky-more { font-size: 0.8em; }
.bsky-media { margin: 0.4em 0; }
.bsky-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-width: 420px; }
.bsky-tile { position: relative; display: inline-block; line-height: 0; }
.bsky-img { max-width: 100%; max-height: 280px; border-radius: 6px; }
.bsky-grid .bsky-img { width: 100%; height: 140px; object-fit: cover; max-height: none; }
.bsky-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1; padding: 0.3em 0.55em; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; }
.bsky-card { display: flex; gap: 0.6em; align-items: center; max-width: 420px; padding: 0.4em; border: 1px solid #3a3e46; border-radius: 6px; }
.bsky-card-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex: none; }
.bsky-card-body { display: flex; flex-direction: column; min-width: 0; }
.bsky-card-title { color: #e4e6eb; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsky-card-host { color: #9aa0a8; font-size: 0.75em; }
.bsky-quote { margin: 0.4em 0; padding: 0.4em 0.7em; border: 1px solid #3a3e46; border-radius: 6px; font-size: 0.9em; }

/* dumb fixes cuz old me was a idiot */
body {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem;      /* ~18px, 150% was huge on phones */
  line-height: 1.65;
  max-width: 68ch;        /* line length in characters, not px */
  color: #e4e6eb;         /* slightly softer than pure white on gray */
}
p { margin: 0 0 1.1em; }
h1, h2, h3 { line-height: 1.25; }
img, video { max-width: 100%; height: auto; }
pre, code { background: #1b1d22; border-radius: 4px; }
pre { padding: 0.8em 1em; }
code { padding: 0.1em 0.3em; }
pre code { padding: 0; }
blockquote { border-left: 3px solid #FF4DA8; margin-left: 0; padding-left: 1em; color: #b8bcc4; }