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%;
	}
}