body,
html {
	min-height: 100dvh;
}

body {
	display: flex;
	flex-direction: column;

	@media (min-width: /* --brk-md-desktop */ 1300px) {
		flex-direction: row;

		main {
			flex: 1;
			overflow: hidden;
		}
	}
}

/* Forms */
.form-group {
	margin-bottom: var(--space-lg);
}

.form-group label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 500;
	color: var(--color-text);
}

.error-message {
	background-color: var(--color-error-bg);
	color: var(--color-error);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-lg);
}

/* Pages */
h1 {
	margin-bottom: var(--space-lg);
	color: var(--color-text);
}

main.page-padding {
	padding: var(--space-md);
}

h2 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

/* Error page */
.error-page {
	padding: var(--space-xl) var(--space-md);
	text-align: center;
}

.error-page h1 {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-md);
}

.error-page .error-message {
	margin-bottom: var(--space-xl);
	padding: var(--space-md);
}

.error-page .btn {
	display: inline-block;
	text-decoration: none;
}

.rendered-markdown {
	p {
		margin-bottom: 1rem;
	}

	p:last-of-type {
		margin-bottom: 0;
	}

	img {
		max-width: 100%;
		border: 1px solid var(--color-border);
	}

	.emoji-image {
		width: 1em;
		height: 1em;
		border: none;
		vertical-align: -0.1em;
	}
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	cursor: s-resize;
}