sccontent.css

:root {
  --c-fprimary: hsl(0, 0%, 1%);
  --bg-fprimary: hsl(148, 41%, 92%);
  --br-fprimary: hsl(148, 70%, 20%);
  --bg-like-br1: hsl(148, 41%, 90%);
  --c-a-and-btn: hsl(148, 70%, 25%);
  --c-fh1: hsl(0, 0%, 1%);
  --bg-fh1: hsl(148, 41%, 98%);
  --br-fh1: hsl(148, 74%, 36%);
  --c-icon-sub: hsl(0, 0%, 30%);
  --c-icon-new: hsl(148, 74%, 36%);
  --c-focus-v: hsl(30, 100%, 50%);
  --c-a-focus: hsl(0, 79%, 35%);
  --c-focus: hsl(210, 6%, 21%);
  --bg-focus: hsl(148, 74%, 56%);
  --bg-post-h: hsl(0, 40%, 96%);
  --bg-post-b: hsl(148, 100%, 99%);
  --bg-fann: hsl(148, 41%, 97%);
  --bg-submenu: hsl(148, 41%, 95%);
  --bg-stats: hsl(148, 41%, 97%);
  --c-active: hsl(210, 6%, 21%);
  --c-nav-focus: hsl(148, 41%, 92%);
  --bg-active: hsl(148, 41%, 80%);
  --bg-btn: hsl(148, 41%, 80%);
  --bg-nav: hsl(148, 41%, 97%);
  --bg-like-nav: hsl(148, 41%, 97%);
  --c-light: hsl(210, 6%, 21%);
  --c-tsticky: hsl(0, 100%, 50%);
  --c-faggr: hsl(357, 75%, 50%);
  --c-faggr-pr: hsl(0, 0%, 20%);
  --bg-faggr: hsl(0, 100%, 86%);
  --c-tclosed: hsl(0, 0%, 70%);
  --c-tpoll: hsl(148, 74%, 36%);
  --c-req: hsl(0, 100%, 50%);
  --bg-bbcode: hsl(0, 0%, 94%);
  --br-bbcode: hsl(0, 0%, 6%);
  --bg-poll-res: hsl(148, 74%, 36%);
  --c-sel: hsl(0, 0%, 0%);
  --bg-sel: hsl(0, 0%, 60%);
  --c-highlighted: hsl(0, 100%, 50%);
  --c-reaction: hsl(210, 6%, 21%);
  --c-reaction-sel: hsl(120, 100%, 50%);
  --bg-reaction: hsl(148, 41%, 99%);
  --br-reaction: hsl(148, 41%, 80%);
}

html,
body,
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  outline: none;
}

body {
  color: var(--c-fprimary);
  background-color: var(--bg-post-b); /*var(--bg-fprimary);*/
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

html {
  height: 100%;
}

.ios {
  /* Needed for iOS scrolling bug fix */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ios body {
  /* Needed for iOS scrolling bug fix */
  position: relative;
  overflow: auto;
}

body {
  /* Needed to make sure body covers the whole editor and that
    long lines don't cause horizontal scrolling */
  min-height: 100%;
  word-wrap: break-word;
}

body.placeholder::before {
  content: attr(placeholder);
  color: #555;
  font-style: italic;
}

ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-inline-start: 1.5rem;
}

ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-inline-start: 1.5rem;
}

code {
  display: block;
  white-space: pre;
  margin: 0 0.625rem;
  padding: 0.625rem;
  background-color: var(--bg-bbcode);
  border: 0.0625rem solid var(--br-bbcode);
  overflow: auto;
  max-height: 45rem;
  min-height: 2rem;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

blockquote {
  border-inline-start: 0.1875rem solid var(--br-bbcode);
  border-top: 0.0625rem solid var(--br-bbcode);
  padding: 0.625rem;
}

blockquote cite {
  display: block;
  padding: 0.625rem;
  background-color: var(--bg-like-nav);
  margin: -0.625rem -0.625rem 0.625rem -0.625rem;
}

a, span.f-bb-hashtag {
  color: var(--c-a-and-btn);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.5s, background-color 0.5s;
}

a:hover, a:focus, span.f-bb-hashtag:hover, span.f-bb-hashtag:focus {
  color: var(--c-a-focus);
  text-decoration: underline;
}

table {
  border-collapse: collapse;
  border: 0.0625rem solid var(--c-fprimary);
}

td, th {
  border: 0.0625rem solid var(--c-fprimary);
  empty-cells: show;
  padding: 0.3125rem;
  min-width: 1rem;
}

th {
  background-color: var(--bg-post-h);
}

b,
strong {
  font-weight: bold;
}

i,
em {
 font-style: italic;
}

s {
  text-decoration: line-through;
}

u {
  text-decoration: underline;
}

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

span.f-bb-mono {
  border: 0.0625rem solid var(--br-bbcode);
  background-color: var(--bg-bbcode);
  padding: 0 0.25rem;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

summary {
  cursor: pointer;
  margin-bottom: 0.625rem;
}

summary::after {
  display: inline-block;
  content: "(click to open)";
  font-size: 0.875rem;
  margin: 0 0.3125rem;
  opacity: 0.6;
}

details[open] > summary::after {
  content: "(click to close)";
}

div.f-bb-s-body {
  padding: 0.625rem;
  border-inline-start: 0.1875rem solid var(--br-fprimary);
}

span.f-bb-hashtag {
  border-bottom-style: dashed;
  border-bottom-width: 0.0625rem;
}

code:not(:first-child),
blockquote:not(:first-child),
table:not(:first-child),
img:not(:first-child),
details:not(:first-child) {
  margin-top: 0.5rem;
}

code:not(:last-child),
blockquote:not(:last-child),
table:not(:last-child),
img:not(:last-child),
details:not(:last-child) {
  margin-bottom: 0.5rem;
}

::selection {
  /*color: var(--c-sel);*/
  background-color: var(--bg-sel);
  text-shadow: -0.0625rem 0 0 var(--c-sel), 0.0625rem 0 0 var(--c-sel), 0 -0.0625rem 0 var(--c-sel), 0 0.0625rem 0 var(--c-sel);
}

h1, h2, h3, h4 , h5, h6 {
  display: block;
  font-weight: bold;
}

h1 {
  font-size: 2rem;
  margin: 0.67rem;
}

h2 {
  font-size: 1.5rem;
  margin: 0.83rem;
}

h3 {
  font-size: 1.17rem;
  margin: 1rem;
}

h4 {
  font-size: 1rem;
  margin: 1.33rem;
}

h5 {
  font-size: .83rem;
  margin: 1.67rem;
}

h6 {
  font-size: .67rem;
  margin: 2.33rem;
}