:root {
	background-color: #d4d3ce;
	color: black;
	font-family: sans-serif;
	font-size: 10pt;
	background-image: url(newsprint-1024.jpg);
	background-size: 256px 256px;

	--column-width: 40ch; /*200px;*/
	--column-gap: 2ch;
	--image-aspect: 9/16;
	--image-width: var(--column-width);
	--image-height: calc(var(--image-width) * var(--image-aspect));
	--image-gap: 4px;
	--image-half-width: calc((var(--image-width) - var(--image-gap)) / 2);
	--image-half-height: calc((var(--image-height) - var(--image-gap)) / 2);
	--image-half-x: calc(var(--image-half-width) + var(--image-gap));
	--image-half-y: calc(var(--image-half-height) + var(--image-gap));

	--text-color: black;
	--secondary-text-color: #666;
	--tertiary-text-color: #ccc;
	--card-background: #ccc;
	--link-color: #44d;
	--visited-link-color: #a5a;

	--cmyk-vibrant: contrast(150%) grayscale(25%) invert(10%);
	--cmyk-mid: contrast(125%) grayscale(30%) invert(10%);
	--cmyk-muted: grayscale(40%) invert(10%);
	--cmyk-experimental: contrast(80%) grayscale(30%) saturate(115%) sepia(10%);

	--font-size-normal: 10pt;
	--font-size-small: calc(var(--font-size-normal) * 0.8);
}
body {
	margin: 0;
	padding: 0;
}
a {
	color: var(--link-color);
	text-decoration: none;
}
a:visited {
	color: var(--visited-link-color);
}
a:hover {
	text-decoration: underline;
	background-color: rgba(0, 0, 0, 0.25);
}
a img {
	border: none;
}
.edition-date {
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	mix-blend-mode: multiply;
	filter: var(--cmyk-mid);
	background-color: white;
	padding-top: 1em;
}
#column-container {
	mix-blend-mode: multiply;
	filter: var(--cmyk-mid);
	background-color: white;
	padding: 0.01em 1em 3em 1em;
}
.section-title {
	font-size: 2rem;
	margin-top: 2em;
	margin-bottom: 1em;
	text-align: center;
	border-bottom: 2px double var(--tertiary-text-color);
	position: sticky;
	top: 0;
	background-color: white;
	z-index: 1;
}
.section-title:before {
	content: '☙ ';
}
.section-title:after {
	content: ' ❧';
}
.section-content {
	position: relative;
}
.layout-item {
	position: absolute;
	width: var(--column-width);
}
.status {
	margin: 0.5em 0;
}
.thread .status:nth-child(1n+2) {
	border-top: 2px dotted var(--tertiary-text-color);
}
.status summary {
	border: 1px solid var(--text-color);
	border-radius: 0.5rem;
	background-color: var(--card-background);
	padding: 0.25rem 1rem;
}
.custom-emoji {
	width: 1em;
	height: 1em;
	vertical-align: baseline;
}
.status-reblogged-by {
	margin-bottom: 0.25em;
	font-size: var(--font-size-small);
}
.reblog-name, .reblog-username {
	padding-left: 0.25em;
}
.reblog-name + .reblog-username {
	display: none;
}
.reblog-avatar img {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
}
.status-author-avatar {
	float: left;
	margin-right: 0.5em;
}
.status-author-avatar img {
	width: 2rem;
	height: 2rem;
}
.status-author-name {
	display: block;
}
.status-author-username {
	display: block;
	color: var(--secondary-text-color);
	font-size: var(--font-size-small);
}
.status-content {
	clear: both;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	font-family: serif;
}
.image-style-default .status-media {
	position: relative;
	width: var(--image-width);
	height: var(--image-height);
	margin: 0.5em 0;
}
.status-media-gifv,
.status-media-video {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--image-width);
	height: var(--image-height);
}
.status-media-gifv video,
.status-media-video video {
	width: 100%;
	height: 100%;
}
.image-style-default .status-media-image {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--image-width);
	height: var(--image-height);
	border: 1px solid rgba(0, 0, 0, 0.25);
}
.image-style-default .status-media-count-2 .status-media-image,
.image-style-default .status-media-count-3 .status-media-image,
.image-style-default .status-media-count-4 .status-media-image {
	width: var(--image-half-width);
}
.image-style-default .status-media-count-3 .status-media-image:nth-child(1),
.image-style-default .status-media-count-3 .status-media-image:nth-child(2),
.image-style-default .status-media-count-4 .status-media-image {
	height: var(--image-half-height);
}
.image-style-default .status-media-count-2 .status-media-image:nth-child(2) { left: var(--image-half-x); }
.image-style-default .status-media-count-3 .status-media-image:nth-child(2) { top: var(--image-half-y); }
.image-style-default .status-media-count-3 .status-media-image:nth-child(3) { left: var(--image-half-x); }
.image-style-default .status-media-count-4 .status-media-image:nth-child(2) { left: var(--image-half-x); }
.image-style-default .status-media-count-4 .status-media-image:nth-child(3) { top: var(--image-half-y); }
.image-style-default .status-media-count-4 .status-media-image:nth-child(4) { left: var(--image-half-x); top: var(--image-half-y); }
.image-style-default .status-media-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-style-full-all .status-media-image {
	display: block;
	position: relative;
	width: var(--image-width);
	border: 1px solid rgba(0, 0, 0, 0.25);
}
.image-style-full-all .status-media-image img {
	width: 100%;
}
.image-style-alt .status-media-image {
	margin-top: 0.5em;
	padding: 0.5em;
	background-color: var(--card-background);
	border: 1px solid var(--tertiary-text-color);
}
.image-style-alt .status-media-alt {
	margin: 0.5em 0;
}
.status-gif-sticker {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 0.5em;
	padding: 0.2em 1em;
	font-size: var(--font-size-small);
	font-weight: bold;
}
.status-media-gifv:hover .status-gif-sticker {
	display: none;
}

.status-preview-card {
	margin-top: 0.5em;
	padding: 0.5em;
	background-color: var(--card-background);
	border: 1px solid var(--tertiary-text-color);
}
.status-preview-card-provider:before {
	content: '\27a4' '\2005';
}
.status-preview-card-provider {
	font-size: var(--font-size-small);
}
.status-preview-card-title {
	font-weight: bold;
	margin-top: 0.5em;
}
.status-preview-card-description {
	margin-top: 0.5em;
	color: var(--secondary-text-color);
	text-overflow: ellipsis;
	overflow: hidden;
}
.status-preview-card-author {
	margin-top: 0.2em;
	color: var(--tertiary-text-color);
	font-size: var(--font-size-small);
}
.status-preview-card-image {
	float: right;
	margin: 0.2em 0 0.2em 0.5em;
/*	margin: 0.5em 0;*/
}
.status-preview-card-image img {
	width: calc(var(--image-width) * 0.3);
}
.status-preview-card-footer {
	clear: both;
}

.poll {
	margin-top: 1em;
}
.poll-option-complete {
	position: relative;
	height: 1.5em;
}
.poll-option-fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1.25em;
	background-color: var(--card-background);
}
.poll-option-label-count, .poll-option-label-total {
	display: none;
}
.poll-option-label-percent {
	position: absolute;
	left: 0.5em;
	top: 0.15em;
}

.status-content .invisible {
	display: none;
}
.status-content .ellipsis::after {
	content: '…';
}

.status-footer {
	font-size: var(--font-size-small);
	color: var(--secondary-text-color);
}
.status-footer ul {
	margin: 0.25em 0 0 0;
	padding: 0;
}
.status-footer li {
	display: inline;
	margin: 0;
}
.status-footer li:nth-child(1n+2) {
	margin-inline-start: 0.5em;
}
.status-menu span {
	font-size: 1.5rem;
	cursor: context-menu;
}

.notification-excerpt {
	margin: 0.25em 0;
	padding: 0.5em;
	background-color: var(--card-background);
}
.notification-accounts {
	margin-top: 0.5em;
}
.notification-account-list {
	display: inline-block;
	padding-right: 1em;
}
.notification-account-list:last-child {
	padding-right: 0;
}
.notification-favourites ul::before {
	content: '\2606' ' ';
}
.notification-boosts ul::before {
	content: '\21e7' ' ';
}
.notification-account-list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.notification-account-list li {
	display: inline;
	margin: 0 -0.7em 0 0;
}
.notification-account-list img {
	width: 2em;
	height: 2em;
	border-radius: 1em;
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	vertical-align: middle;
}
.notification-name, .notification-username {
	display: none;
}
.notification-more-accounts {
	display: inline-block;
	width: 2em;
	height: 2em;
	box-sizing: border-box;
	border-radius: 1em;
	background-color: var(--card-background);
	vertical-align: middle;
	margin: 0;
	text-align: center;
} 
.notification-more-count {
	display: inline-block;
	padding-top: 0.4em;
}

.menu {
	background-color: var(--card-background);
	color: var(--text-color);
	border: 1px solid var(--text-color);
	position: absolute;
	min-width: 15ch;
}
.menu-item {
	padding: 0.1em 0.5em;
}
.menu-item:nth-child(1n+2) {
	border-top: 1px solid var(--secondary-text-color);
}
.boost-arrow, .like-star, .reply-arrow {
	display: inline-block;
	padding-inline-end: 0.1em;
}

.trending-hashtag-name {
	font-size: 1.5em;
	font-weight: bold;
	margin: 1em 0 0.5em 0;
	overflow-wrap: break-word;
}

.lightbox-glasspane {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
}
.lightbox-popup {
	position: absolute;
	left: 2em;
	top: 2em;
	right: 2em;
	bottom: 2em;
	overflow: scroll;
	background-color:rgba(0, 0, 0, 0.75);
}
.lightbox-container {
	position: absolute;
	left: 1em;
	top: 1em;
	right: 1em;
	bottom: 1em;
	text-align: center;
}
.lightbox-img {
	margin: 0;
	padding: 0;
	border: 0;
}
.lightbox-scaled .lightbox-img {
	max-width: 100%;
	max-height: 100%;
}

/*@media (prefers-color-scheme: dark) {
	:root {
		background-color: #222;
		color: #fff;

		--text-color: #fff;
		--secondary-text-color: #ccc;
		--tertiary-text-color: #666;
		--card-background: #333;
	}
	a {
		color: #66d;
	}
	a:visited {
		color: #d6d;
	}
}*/
