html { font: 20px sans-serif; max-width: 40rem; margin: 1rem auto; }
pre { max-width: 100%; overflow-x: auto; }

* { box-sizing: border-box; }
.snac-alt-text { text-transform: lowercase; } 
.snac-announcement a { text-transform: lowercase; color: #000; margin-left: 0.4rem; }
.snac-announcement { background-color: #fda; color: #000; padding: 1rem; margin: 1rem 0; border-radius: 0.3rem; }
.snac-author-tag { font-size: 0.8rem; }
.snac-avatar { float: left; height: 2rem; width: 2rem; margin-right: 0.4rem; margin-bottom: 0.4rem; border-radius: 0.3rem; }
.snac-btn-delete, .snac-btn-follow, .snac-btn-hide, .snac-btn-limit, .snac-btn-mute, .snac-btn-unfollow, .snac-btn-unlimit, .snac-btn-unmute { float: right; margin-left: 0.4rem; text-transform: lowercase; }
.snac-btn-pin, .snac-btn-unpin, .snac-btn-like, .snac-btn-boost, .snac-btn-bookmark, .snac-btn-unlike, .snac-btn-unboost, .snac-btn-unbookmark { float: left; margin-right: 0.4rem; text-transform: lowercase; }
.snac-children .snac-post-header p { margin: 0; } 
.snac-children, .snac-quoted-post, blockquote { padding-left: 0.4rem; border-left: 1px solid #888; margin-left: 0.08rem; }
.snac-children>div>a { display: none; }
.snac-content { line-height: 1.4rem; clear: both; }
.snac-content-attachments { margin: 0.4em 0; }
.snac-content-attachments>details { margin: 0.4em 0; font-size: 0.8rem; }
.snac-content>div>div>p { font-size: 0.8rem; text-transform: lowercase; color: #888; }
.snac-embedded-video, img { max-width: 100%; border-radius: 0.3rem; }
.snac-footer a { color: #888; text-decoration-color: #888; }
.snac-footer { margin-top: 2rem; margin-bottom: 2rem; font-size: 0.8rem; color: #888;  }
.snac-header { font-size: 1rem; font-weight: 500; text-transform: lowercase; line-height: 1.4rem; }
.snac-history a { color: #888; text-decoration-color: #888; }
.snac-history li { color: #888; }
.snac-history ul { list-style-type: none; padding: 0; }
.snac-history { padding-top: 2rem; text-transform: lowercase; font-size: 0.8rem; color: #888; }
.snac-instance-blurb dd, .snac-header dd { margin: 0; }
.snac-instance-blurb p, .snac-header p { line-height: 1rem; } 
.snac-instance-blurb { text-transform: lowercase; font-size: 0.8rem; }
.snac-list-of-lists a { color: #888; text-decoration-color: #888; }
.snac-list-of-lists li { display: inline; padding-right: 0.4rem; }
.snac-list-of-lists { padding-left: 0; font-size: 0.8rem; }
.snac-metadata { margin-bottom: 0.4rem; }
.snac-no-more-unseen-posts a { color: #f00; text-decoration-color: #f00;}
.snac-no-more-unseen-posts { border-top: 2px solid #f00; text-transform: lowercase; color: #888; font-size: 0.8rem; color: #f00; margin-bottom: 2rem; }
.snac-notify-filter p { margin: 0.2rem 0; }
.snac-notify-filter>form, .snac-controls>form { overflow: auto; }
.snac-origin a, a.snac-author-tag { color: #888; text-decoration-color: #888; }
.snac-origin { font-size: 0.8rem; color: #888;}
.snac-poll-result td { border-bottom: 1px solid #888; }
.snac-poll-result td:last-child { text-align: right; }
.snac-poll-result { margin-left: auto; margin-right: auto; }
.snac-post { margin-bottom: 4rem; }
.snac-post-header p { line-height: 1rem; }
.snac-post-header span { display: none; }
.snac-post-with-desc .snac-content-attachments img { width: 25%; }
.snac-post-with-desc .snac-origin { margin-bottom: 0.4rem; }
.snac-post-with-desc .snac-post { font-size: 0.8rem; color: #888; text-transform: lowercase; line-height: 1rem; margin-bottom: 2rem; }
.snac-post-with-desc b { font-weight: 500; }
.snac-post-with-desc p { font-size: 0.8rem; text-transform: lowercase; line-height: 1rem; }
.snac-post-with-desc p:nth-of-type(1) { margin: 0 0 0.4rem 0; }
.snac-post-with-desc p:nth-of-type(2) { display: none; }
.snac-posts { margin-top: 2rem; }
.snac-pubdate, .snac-score { float: right; color: #888; font-size: 0.8rem; padding-left: 1rem; line-height: 1rem; }
.snac-reaction { padding: 5px; padding-left: 10px; padding-right: 10px; display: inline-flex; margin-right: 5px; font-family: inherit; font-size: 0.8rem; height: 2.5rem; vertical-align:middle; align-items:center; }
.snac-reaction-div { border-left: solid 1px #888; margin-bottom: .3rem; padding-left: .3rem; }
.snac-reaction-image { max-width: 100%; max-height: 100%; }
.snac-textarea { font-family: inherit; width: 100%; }
.snac-top-controls { padding-bottom: 1.4rem; line-height: 1.4rem; }
.snac-top-nav .snac-avatar { display: none; }
.snac-top-nav a { color: #888; text-decoration-color: #888; text-transform: lowercase; }
.snac-top-nav sup { border-radius: 0.3rem; padding: 0.1rem 0.2rem; }
.snac-top-nav { padding-bottom: 1.4rem; color: transparent; font-size: 0.8rem; }
.snac-top-user p { margin: 0; line-height: 1rem; }
.snac-top-user { font-size: 0.8rem; }
.snac-top-user-bio { margin: 0.4rem 0; line-height: 1rem; }
.snac-top-user-name { font-size: 1rem; }
::placeholder { color: #aaa; }
a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
blockquote { font-size: 0.8rem; }
body>p { text-transform: lowercase; font-size: 0.8rem; color: #888; }
body>p>a, body>p>a:visited { color: #888; }
button, input, select, textarea { font-family: inherit; margin-top: 0.2rem; margin-bottom: 0.2rem; border: 1px solid #888; border-radius: 0.3rem; outline: 0; }
button, input, textarea { padding: 0.2rem 0.3rem; color: #888; }
button, input:not([type="checkbox"]):not([type="radio"]), select, textarea { appearance: none; }
button, input[type="button"], input[type="submit"] { background-color: #ddd; font-size: 0.8rem; color: #000; cursor: pointer; }
button:active, input[type="button"]:active, input[type="checkbox"]:active, input[type="radio"]:active, input[type="submit"]:active { transform: translateY(0.1rem); }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
button:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 0.1rem #888; }
button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: #444; color: #fff; border-color: #444; }
details form br { display: none; }
details form, details form p, details>p { text-transform: lowercase; font-size: 0.8rem; margin: 0.4rem 0; }
details>summary { text-transform: lowercase; list-style: none; cursor: pointer; font-size: 0.8rem; clear: both; }
details>summary:before { content: "\229e  "; }
details[open]>summary:before { content: "\229f  "; }
form#clear { overflow: auto; }
h2.snac-header { margin: 0 0 2rem 0; font-size: 0.8rem; color: #888; border-bottom: 2px solid #888; }
input, select, textarea { background-color: #eee; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { display: block; }
input[type="checkbox"] { margin: 0 0.2rem 0 0; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; vertical-align: middle; }
input[type="email"], input[type="file"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], textarea { width: 100%; margin: 0.4rem 0 0.4rem 0; color: #000; }
input[type="file"] { font-size: 0.8rem; }
input[type="file"] { padding: 0.3rem 0; background: 0 0; border: 0; }
input[type="radio"] { margin: 0 0 0 0.4rem; }
input[type="radio"] { margin: 0 0 0 0.4rem; }
input[type="submit"], ::placeholder { text-transform: lowercase; }
input[type="submit"].snac-btn-delete:hover, input[type="submit"].snac-btn-unpin:hover, input[type="submit"].snac-btn-unlike:hover, input[type="submit"].snac-btn-unboost:hover, input[type="submit"].snac-btn-unbookmark:hover { background: #f00; color: #fff; border-color: #f00; }
input[type="submit"].snac-btn-unpin, input[type="submit"].snac-btn-unlike, input[type="submit"].snac-btn-unboost, input[type="submit"].snac-btn-unbookmark { border-color: #444; background-color: #444; color: #fff; }
label { margin: 0.4rem 0.4rem 0 0; white-space: nowrap; }
select { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='95' width='120' fill='%23888' %3E%3Cpolygon points='0,0 100,0 50,100' /%3E%3C/svg%3E") calc(100% - 0.4rem) 50%/0.6rem no-repeat; padding: 0.2rem 1.4rem 0.2rem 0.4rem; }
select { margin: 0.4rem 0 0 0; color: #000; }
select { max-width: 20rem; }
select, input[type="time"], input[type="date"], input[type="email"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], textarea { font-size: 1rem; } 
table { width: 100% }
textarea { resize: vertical; }

@media (prefers-color-scheme: dark) {
	::placeholder { color: #888; }
	button, input[type="button"], input[type="submit"] { background-color: #666; border-color: #888; color: #fff; }
	button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: #aaa; color: #000; border-color: #aaa }
	html { background-color: #1c1c1c; color: #fff; } 
	input, select, textarea { background-color: #222; }
	input[type="submit"].snac-btn-unpin, input[type="submit"].snac-btn-unlike, input[type="submit"].snac-btn-unboost, input[type="submit"].snac-btn-unbookmark { border-color: #ddd; background-color: #ddd; color: #000; }
	select, input[type="email"], input[type="file"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], textarea { color: #fff; }
  a { color: #9394F9; }
}