h1,
.h1 {
	font: var(--h1);
	hyphens: auto;
}

h2,
.h2 {
	font: var(--h2);
	hyphens: auto;
}

h3,
.h3 {
	font: var(--h3);
	hyphens: auto;
}

h4,
.h4 {
	font: var(--h4);
	hyphens: auto;
}

h5,
.h5 {
	font: var(--h5);
	hyphens: auto;
}

h6,
.h6 {
	font: var(--h7);
	hyphens: auto;
}

p {
	min-height: 1.8em;
}

a {
	color: var(--color-secondary);
	text-decoration: none;
}

body[data-device="desktop"] a:hover {
	text-decoration: underline;
}

.text img {
	height: auto !important;
	max-width: 100%;
}

.text ol {
	padding-left: 17px;
}

.text ol li {
	padding-left: 7px;
}

.text ul:not(.nav) {
	padding-left: 19px;
}

.text hr {
	width: 100%;
	height: 1px;
	background-color: var(--color-smoke);
	border: 0;
}

.text blockquote {
	padding: 9px 15px;
	background-color: var(--color-dark-snow);
	border-left: 5px solid var(--color-extra-dark-smoke);
}

.text pre {
	box-sizing: border-box;
	width: 100%;
	padding: 9px 15px;
	overflow-x: auto;
	background-color: var(--color-extra-dark-snow);
}

.main-width {
	width: var(--main-width);
	max-width: var(--max-main-width);
}

.font-large {
	font: var(--font-large);
}

.font-normal {
	font: var(--font-normal);
}

.font-small {
	font: var(--font-small);
}

.font-tiny {
	font: var(--font-tiny);
}

@media (max-width: 520px) {
	.main-width {
		width: calc(100% - 20px - 20px);
		max-width: calc(100% - 20px - 20px);
	}
}