:root {
	--bg-color: white;
	--main-text-color: black;

	--main-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	--outline-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

	--nav-icon-hover-color: #D4D3D4;
	--alt-text-color: #3a3a3a;

	--button-bg-color: black;
	--button-text-color: white;
	--button-border-radius: 20px;
	--button-border: 2px black solid;
	--button-bg-color-on-hover: white;
	--button-text-color-on-hover: black;

	--searchbar-border: 2px black solid;

	--link-text-color: #0000EE;
	--link-hover-color: #0000EE;
	--link-visited-color: #551A8B;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #111215;
		--card-color: #1A1B1E;
		--main-text-color: #F4F4F6;
		--alt-text-color: #A0A0A5;

		--main-shadow: 0px 4px 12px rgba(0, 0, 0, 0.32);
		--outline-shadow:
		rgba(255, 255, 255, 0.04) 0px 1px 3px 0px,
		rgba(255, 255, 255, 0.12) 0px 0px 0px 1px;

		--nav-icon-hover-color: none;

		--button-bg-color: #F5F5F7;
		--button-text-color: #111215;
		--button-border-radius: 20px;
		--button-border: 2px solid #2C2D32;

		--button-bg-color-on-hover: #2C2D32;
		--button-text-color-on-hover: #F5F5F7;

		--searchbar-border: 2px solid #2C2D32;

		--link-text-color: #6CA8FF;
		--link-hover-color: #A9C9FF;
		--link-visited-color: #9BA2D0;
	}

	nav img {
		filter: brightness(0) invert(1);
	}
}

body {
	font-family:
		Helvetica Neue,
		Helvetica,
		Arial,
		sans-serif;
	margin: 0;
	padding: 0;
	padding-bottom: 2em;
	background-color: var(--bg-color);
	color: var(--main-text-color);
}

a {
	color: var(--link-text-color);
}

a:hover {
	color: var(--link-hover-color);
}

a:visited {
	color: var(--link-visited-color);
}

nav {
	box-shadow: var(--outline-shadow);
	margin-bottom: 2em;
	max-height: 3em;
}

nav img {
	max-height: 3em;
}

.right-navbar-items {
	float: right;
	list-style-type: none;
	display: inline-block;
	margin-top: 0;
	padding-top: 0.2em;
	margin-right: 0.5em;
}

.right-navbar-items li {
	display: inline;
}

.right-navbar-items li img {
	max-height: 2.5em;
	border-radius: 0.3em;
	padding: 0.1em;
}

.right-navbar-items li img:hover {
	background-color: var(--nav-icon-hover-color);
	box-shadow: var(--main-shadow);
}

.item-card {
	box-shadow: var(--main-shadow);
	margin: 0 auto;
	width: 90%;
	max-width: 45em;
	padding: 3%;
	overflow: hidden;
	margin-bottom: 1em;
	object-fit: contain;
}

.item-heading {
	text-align: center;
}

.user-info img {
	max-height: 2.5em;
	border-radius: 0.2em;
	box-shadow: var(--outline-shadow);
}

.username {
	text-align: center;
	position: relative;
	bottom: 1em;
	color: var(--main-text-color);
	text-decoration: none;
}

.user-info .username {
	padding-bottom: 0.1em;
}

.username:hover {
	text-decoration: underline;
	color: var(--alt-text-color);
}

.post-image img,
.post-image video,
.post-image .carousel img {
	max-height: 30em;
	max-width: 100%;
	object-fit: cover;
}

.post-image {
	margin-right: 4em;
	float: left;
	white-space: nowrap;
	max-width: 60%;
	max-height: 35em;
}

.post-body {
	margin-left: 4em;
	display: inline;
	width: 30%;
}

.comment-text,
.post-caption-text,
.user-bio-text {
	white-space: pre-line;
}
.post-info {
	max-height: 35em;
	overflow-y: auto;
}

.carousel {
	overflow: auto;
	max-width: 25em;
}

.comments {
	padding: 4%;
	box-shadow: var(--outline-shadow);
}

.post-time {
	color: var(--alt-text-color);
	size: 0.5em;
}

.post-likes {
	color: var(--alt-text-color);
	size: 0.5em;
}
.user-info {
	display: block;
	margin-bottom: 0.5em;
}

button,
.next-button {
	border-radius: var(--button-border-radius);
	padding: 0.5em;
	margin: 0 auto;
	background-color: var(--button-bg-color);
	border: var(--button-border);
	color: var(--button-text-color);
}

button:hover,
.next-button:hover {
	background-color: var(--button-bg-color-on-hover);
	color: var(--button-text-color-on-hover);
}

input[type="text"] {
	border: var(--searchbar-border);
	padding: 0.5em;
	border-radius: 15px;
}

.next-button {
	width: 5em;
	text-decoration: none;
	display: block;
	text-align: center;
}

.search-form {
	width: 20em;
}

pre {
	white-space: pre-line;
	background-color: #c9c9c9;
	border-radius: 10px;
	padding: 0.5em;
	overflow-x: scroll;
}

@media only screen and (max-width: 850px) {
	.post-image {
		float: none;
		margin-bottom: 2em;
	}

	.post-image img,
	.post-image video {
		max-height: 30em;
	}
	.post-image {
		max-width: 100%;
	}
}

.instance-list {
	list-style-type: none;
	padding: 0;
	text-align: center;
}
.instance-list li {
	margin: 0.8em 0;
	font-size: 1.1em;
}
.instance-list a {
	text-decoration: none;
}
.instance-list a:hover {
	text-decoration: underline;
}

.offline-text {
	color: #d9534f;
	font-weight: bold;
	font-size: 0.9em;
	margin-left: 0.5em;
}
.instance-offline a {
	color: #999;
	text-decoration: line-through;
}

.search-container {
	width: 90%;
	max-width: 45em;
}

.search-form-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

.search-input {
	width: 80%;
}

.search-button {
	width: 80%;
	max-width: 200px;
}

.instance-type-heading {
	text-align: center;
}

.random-instance-container {
	text-align: center;
	margin-bottom: 1em;
}

.random-instance-link {
	font-weight: bold;
}