html {
	font-size: max(14px, min(2.23vmin, 1.12vw));
}

:root {
	--text-color: #eee;
	--text-secondary-color: #ddd;
	--text-tertiary-color: #ccc;
	--bg-color: #000;
	--bg-color-transparent: #000000e0;
	--bg-secondary-color: #111;
	--bg-tertiary-color: #222;
	--bg-hover-color: #333333e0;
	--link-color: #93b8d9;
	--external-link-color: #56b8ff;
	--gap: max(5px, 1.5vmin);
	--border-radius: .4em;
	--num-columns: 2;
	--list-view-width: max(21vw, min(10rem, 45vw))
}

body.light {
	--bg-color: #ececec;
	--bg-color-transparent: #e0e0e0d0;
	--text-color: #000;
	--text-secondary-color: #111;
	--text-tertiary-color: #222;
	--bg-secondary-color: #fff;
	--bg-tertiary-color: #eee;
	--bg-hover-color: #ddd;
	--link-color: #0a608a;
	--external-link-color: #0077f7;
	color-scheme: light
}

body {
	font-family: sans-serif, serif;
	font-size: 1rem;
	color: var(--text-color);
	background-color: var(--bg-color);
	color-scheme: dark;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column
}

.hidden {
	display: none !important
}

#top_header {
	background-color: var(--bg-secondary-color);
	padding: var(--gap);
	justify-content: space-between
}

#top_header,
#top_header>div,
#top_header form,
#viewer_controls {
	display: flex;
	align-items: center
}

#header_center {
	background-color: var(--bg-tertiary-color);
	border-radius: var(--border-radius)
}

#page_input {
	max-width: 30vw;
	font-size: 1rem;
	width: 20em;
}

#viewer_controls {
	gap: var(--gap)
}

#viewer_controls button {
	display: flex;
	height: 2.2em
}

.input,
button,
select,
input {
	font-size: .95rem;
	color: var(--text-secondary-color);
	background-color: var(--bg-tertiary-color);
	border-radius: var(--border-radius);
	outline: none;
	border: none;
	align-items: center;
	justify-content: center;
	padding: .5em .6em;
	max-width: 40vw
}

button {
	cursor: pointer;
}

button:hover,
select:hover,
input:hover {
	background-color: var(--bg-hover-color)
}

label {
	color: var(--text-secondary-color)
}

label:hover {
	color: var(--text-color)
}

button:disabled {
	opacity: .2;
	cursor: not-allowed
}

button.active {
	font-weight: 700
}

dialog {
	background-color: var(--bg-secondary-color);
	border: 1px solid var(--bg-tertiary-color);
	border-radius: var(--border-radius);
	padding: 2.0rem;
	max-height: 80%;
	max-width: 80vw;
	min-width: 20vw;
}

.header_popover {
	inset: unset;
	margin: 0;
	top: calc(2.2rem + var(--gap) * 1.5);
	justify-self: anchor-center
}

.checkbox-group {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
	background-color: var(--bg-tertiary-color);
	border-radius: .2em;
	max-height: 30vh;
	overflow-y: auto
}

.checkbox-group label {
	font-size: .95em;
	cursor: pointer;
	padding: .25em
}

.checkbox-group label:hover {
	background-color: var(--bg-hover-color)
}

#settings_popover::backdrop {
	background-color: var(--bg-color-transparent)
}

dialog input {
	margin: .5em;
}

dialog div {
	margin-bottom: 1rem;
	margin-left: 1rem
}

dialog h3 {
	display: inline-block;
}

.md>:first-child,
dialog>:first-child {
	margin-top: 0
}

.md>:last-child,
dialog>:last-child {
	margin-bottom: 0.25em;
}

.md h1 {
	font-size: 1.25rem
}

.md h2 {
	font-size: 1.175rem
}

.md h3 {
	font-size: 1.1rem
}

a {
	font-weight: 700;
	color: var(--link-color);
	text-decoration: none
}

a:hover {
	text-decoration: underline
}

a.preview-card {
	font-weight: unset;
	color: unset;
	text-decoration: unset;
	border: 1px solid var(--bg-tertiary-color)
}

a[href^=http] {
	font-weight: 400;
	color: var(--external-link-color)
}

strong {
	font-weight: 700
}

table,
th,
td {
	border: 1px solid currentColor;
	border-collapse: collapse;
	padding: var(--gap);
	vertical-align: top
}

table {
	margin: 1.25em 0
}

code,
blockquote,
pre {
	background-color: var(--bg-tertiary-color);
	width: fit-content;
	margin: 0;
	border-radius: var(--border-radius);
	padding: 0 .5em;
}

blockquote {
	font-style: italic
}

code,
pre {
	white-space: pre-wrap
}

pre {
	padding: 1rem
}

li {
	line-height: 1.4em;
	margin: .5em 0
}

#top_container {
	margin: var(--gap) 0 0 var(--gap);
	display: flex;
	overflow: hidden;
	width: calc(100vw - var(--gap))
}

#top_container * {
	max-width: 100%;
	word-break: break-word
}

#post_viewer {
	display: none;
	margin: 0 auto
}

#page_viewer,
#post_viewer {
	height: 100%;
	overflow-y: auto;
	overflow-x: clip;
	padding-right: var(--gap)
}

#page_viewer {
	display: flex;
	gap: var(--gap);
	flex-direction: column;
	width: 100%
}

#profile_card {
	background-color: var(--bg-secondary-color)
}

#profile_header {
	position: relative
}

#profile_banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .15
}

.profile-content {
	padding: var(--gap);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%
}

.profile-icon {
	width: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5rem;
	flex-shrink: 0
}

#profile_details {
	padding: var(--gap);
	max-height: 55vh;
	overflow-y: auto
}

#cards_container {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--num-columns), minmax(var(--min-column-width), 1fr));
	grid-template-rows: masonry
}

.preview-card {
	font-size: .95rem;
	color: var(--text-tertiary-color);
	background-color: var(--bg-secondary-color);
	padding: var(--gap);
	cursor: pointer;
	position: relative;
	display: flex;
	border-radius: var(--border-radius);
	overflow: hidden;
	flex-direction: column
}

.active,
.highlighted,
.preview-card:hover {
	background-color: var(--bg-hover-color) !important
}

.card-title {
	font-size: 1rem;
	color: var(--text-color);
	margin-bottom: .1rem
}

.content-preview {
	flex-grow: 1;
	align-content: center;
	position: relative
}

.card-content {
	width: 100%;
	height: 100%
}

#cards_container.classic .card-content {
	display: block
}

#cards_container.modern .card-content {
	display: flex;
	gap: .5rem;
	flex-direction: column
}

#cards_container.modern .classic-content,
#cards_container.classic .modern-content {
	display: none
}

#cards_container.modern .card-metadata {
	font-weight: 700
}

.preview-thumbnail {
	justify-self: center;
	margin-right: var(--gap);
	float: left;
	width: 5rem
}

#top_container.viewing-post .preview-thumbnail {
	float: unset;
	width: 100%
}

.card-metadata {
	color: var(--text-tertiary-color)
}

.content-preview img {
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: contain
}

.content-preview .play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2em;
	color: var(--text-color);
	margin: auto;
	text-shadow: 0 0 1.25em var(--bg-hover-color)
}

.selftext-preview {
	margin: var(--gap);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	max-height: 66vh
}

.placeholder-icon {
	background-color: var(--bg-tertiary-color);
	border-radius: 16%
}

.profile-info > * {
	margin: var(--gap) 0
}

.separated > :not(:last-child):after {
	content: " • "
}

.post-type,
.flair-emoji {
	max-height: 1em;
	vertical-align: middle
}

.flair {
	margin: 0 .25em;
	border-radius: var(--border-radius);
}

#top_container.blurring .blurred {

	.preview-thumbnail,
	.content-preview,
	.profile-icon,
	.card-title {
		filter: blur(1em)
	}

	.profile-content {
		backdrop-filter: blur(1em)
	}
}

#top_container.viewing-post #profile_card {
	display: none !important
}

#top_container.viewing-post #page_viewer {
	flex: 1 1 auto;
	width: var(--list-view-width)
}

#top_container.viewing-post #cards_container {
	grid-template-columns: 100%
}

#top_container.viewing-post #post_viewer {
	width: calc(100vw - var(--list-view-width) - var(--gap));
	resize: horizontal;
	display: unset !important
}

#top_container.viewer-expanded #page_viewer {
	display: none
}

#top_container.viewer-expanded #post_viewer {
	--list-view-width: 0px
}

@media (max-width: 640px) {
	:root {
		--list-view-width: var(--gap)
	}

	#cards_container {
		grid-template-columns: minmax(0, 1fr) !important
	}

	#num_columns {
		display: none
	}

	#toggle_previews,
	#top_container.viewing-post #page_viewer {
		display: none !important
	}
}

@media (max-width: 400px) {
	.profile-content {
		flex-direction: column;
		text-align: center
	}
}

#post_viewer p {
	line-height: 1.5rem
}

.post-container {
	display: grid;
	gap: .25rem;
	background-color: var(--bg-secondary-color);
	margin-bottom: var(--gap);
	padding: 1.2rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--bg-tertiary-color)
}

.post-title {
	margin: 0 0 .25em;
}

.post-meta {
	font-size: .9em;
	color: var(--text-tertiary-color);
	margin-bottom: 1rem;
	line-height: 1.4em;
}

.post-content {
	width: inherit
}

#post_content,
.comment-body {

	img,
	video,
	iframe {
		margin-right: 5px;
		max-height: max(calc(100vh - 11em), 200px);
		position: relative !important
	}

	iframe,
	video {
		width: 100%;
		height: calc(100vh - 10rem)
	}
}

.media img {
	cursor: pointer
}

.media+.selftext {
	margin-top: 1em
}

#comment_controls {
	padding: 1em;
	background-color: var(--bg-secondary-color)
}

#comments_section {
	background-color: var(--bg-secondary-color);
	border-radius: var(--border-radius);
	border: 1px solid var(--bg-tertiary-color)
}

.comment {
	padding: 1em 0 1em 1em;
	margin-bottom: -1px;
	opacity: .5;
	background-color: var(--bg-secondary-color);
	border-style: solid;
	border-width: 1px 0 0 1px;
	border-color: var(--bg-color)
}

.comment[open] {
	opacity: 1;
	padding-bottom: 0
}

.comment summary {
	color: gray
}

.comment-replies .comment {
	margin-left: 1em
}

.comment-body {
	padding: .5em;
	margin: .5em
}

.comment-meta {
	font-size: .85rem
}

#suggestions_popover {
	padding: 0
}

#suggestions_popover div {
	margin: 0;
	padding: .5em 1em;
	cursor: pointer
}

#suggestions_popover div:hover {
	background-color: var(--bg-hover-color)
}

#images_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--bg-color-transparent);
	backdrop-filter: blur(5px);
	z-index: 100;
	display: flex;
	justify-content: center
}

#images_modal_content {
	align-content: center
}

#images_modal_img {
	max-width: 100vw;
	max-height: 100vh;
	object-fit: contain;
	cursor: zoom-in
}

.zoomed {
	overflow: auto
}

.zoomed img {
	max-width: none !important;
	max-height: none !important;
	cursor: zoom-out !important
}

.gallery-prev,
.gallery-next,
.gallery-close {
	position: absolute;
	font-size: 2.2em;
	padding: .2em .35em;
	max-height: 1.8em
}

.gallery-prev,
.gallery-next {
	top: 50%;
	transform: translateY(-50%)
}

.gallery-prev {
	left: 0
}

.gallery-next {
	right: 0
}

.gallery-close {
	top: var(--gap);
	right: var(--gap)
}

#load_more_div {
	padding: var(--gap);
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center
}

#loading_spinner {
	border: .5em solid var(--bg-tertiary-color);
	border-top: .5em solid var(--link-color);
	border-radius: 50%;
	width: 2em;
	height: 2em;
	animation: spin 1s linear infinite;
	margin: 1em
}

@keyframes spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

#close_settings {
	display: block;
	padding: .5em 1rem;
	margin: 1em auto 0
}

.wiki .toc {
	border: 1px solid var(--bg-tertiary-color);
	padding: .5em 2em 0 0;
	margin-bottom: 1em;
	width: fit-content
}

.toc_child::marker {
	content: ""
}

*:focus {
	outline-width: 0px;
}

.preview-card:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
	outline: 1px solid grey;
}