:root {
	--text: #333;
	--accent: #ff8080;
	--bg: #fff;
	--nav-bg: linear-gradient(#444,#222);
	--nav-fg: #fff;
	--header-border: thin solid var(--accent);
	--header-shadow: none;
	--menu-head-border: none;
	--selected-menu-head-border: none;
	--hovered-menu-bg: #ff808033;
	--mobile-submenu-bg: #222;
	--toc-bg: linear-gradient(#444,#222);
	--hovered-toc-item-bg: #222;
	--toc-inactive-border: 4px solid transparent;
	--toc-active-border: 4px solid var(--accent);
	--prev-next-separator: none;
	--prev-next-border: thin solid #bbb3;
	--prev-next-bg: var(--toc-bg);
	--hovered-prev-next-bg: var(--hovered-toc-item-bg);
	--link-fg: #000;
	--hovered-link-bg: #ff8080;
	--code-fg: #111;
	--code-bg: #ffc8c8aa;
	--search-panel-wrapper-bg: #fffe;
	--search-controls-bg: #000c;
	--search-results-border: none;
	--search-result-border: none;
	--search-results-bg: linear-gradient(#eee,#ddd);
	--search-result-link-fg: #000c;
	--selected-search-result-bg: #ff808033;
	--hovered-search-result-link-fg: #000;
	--thead-border: thin solid #555a;
	--tr-border: thin solid #ffc8c877;
}

/* body background*/

@media (min-width: 800px) {
	body {
		background-image:
			linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0.95) 100%),
			url("../img/cochon.jpg");
		background-position: center;
		background-size: cover;
		background-attachment: fixed;
	}
}

/* titles */

main h1 {
	font-size: 22px;
	border-bottom: solid 1px;
	padding-bottom: 8px;
	margin: 50px 0 30px 0;
	border-image-source: linear-gradient(to right, var(--accent), #fffa);
	border-image-slice: 1;
	color: #111;
}
main h2 {
	font-size: 20px;
	color: #111;
	margin: 25px 0 20px 0;
}
main h3 {
	font-size: 16px;
	color: #111;
}
main h4 {
	color: #111;
}