:root {
	--margin: 5.5555;
	--bodyfont: 1.414em;
	--h1font: 9.9vw;
	--h2font: calc(1.414 * 1.414 * 1em);
	--h3font: calc(1.414 * 1em);
	--h4font: calc(1em);
	--colorwheel: 0;
}
@media (max-width: 35em) {
	:root {
		--bodyfont: 1em;
		--margin: 2.77775;
	}
}

@media (min-width: 25em) {
	:root {
		--h2font: calc(1.414 * 1.414 * 1.414 * 1em);
		--h3font: calc(1.414 * 1.414 * 1em);
		--h4font: calc(1.414 * 1em);
	}
}

audio {
	display: none;
}
html {
	font-size: 1.5em;
	font-size: var(--bodyfont);
}
body {
	font-family: "Greta Sans", October, sans-serif;
	background-color: white;
	color: black;
	line-height: 1.414;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	padding: 0 0 calc( var(--margin) * 2vh);
	display: grid;
	grid-template-columns: calc( var(--margin) * 1vw) 1fr calc( var(--margin) * 1vw);
}
body > * {
	grid-column-start: 2;
}
h1,
header {
	grid-column: 1 / 4;
	margin: 0 0 1rem;
}

header + p,
h1 + p {
	font-weight: 600;
}
img,
video {
	max-width: 100%;
	height: auto;
	border: 1px solid silver;
}

body > footer {
	margin-top: 11.1111vh;
	font-size: .8em;
	font-style: italic;
}
footer section + section {
	margin-top: 11.1111vh;
}
.next + footer {
	margin-top: 0;
}

@media (min-width: 50em) {
	body {
		grid-template-columns: calc( var(--margin) * 1vw) 1fr 2fr calc( var(--margin) * 1vw);
	}
	body > *,
	.next + footer {
		grid-column-start: 3;
	}
	body > footer,
	.home > footer {
		grid-column: 2 / 4;
	}
	body > footer section:first-of-type ul {
		columns: 2;
		column-gap: 2em;
	}
	body > footer section:first-of-type ul li {
		display: inline-block;
		width: 100%;
	}
	h1,
	header {
		grid-column: 1 / 5;
		margin: 0 0 calc( var(--margin) * 1vh);
	}
	header + p,
	h1 + p {
		grid-column: 2 / 4;
		font-weight: 200;
		font-size: 150%;
		line-height: 1.2;
		max-width: 100%;
		margin-bottom: calc( var(--margin) * 1vh);
	}
	img {
		grid-column: 1 / 3;
	}
	
}
@media (min-width: 80em) {
	body {
		grid-template-columns: calc( var(--margin) * 1vw) 1fr 1fr 2fr calc( var(--margin) * 1vw);
	}
	body > *,
	.next + footer {
		grid-column-start: 4;
	}
	body > footer,
	.home > footer {
		grid-column: 2 / 5;
	}
	body > footer section:first-of-type ul {
		columns: 3;
	}
	
	h1,
	header {
		grid-column: 1 / 6;
	}
	header + p,
	h1 + p {
		grid-column: 3 / 5;
	}
	img {
		grid-column: 3/ 5;
	}
}
@media (min-width: 90em) {
	body {
		grid-template-columns: auto 15em 15em 30em auto;
	}
}

h1 {
	font-family: "Greta Display","Times New Roman",serif;
	font-style: italic;
	font-size: 8.6vw;
	font-size: var(--h1font);
	line-height: 1;
	color: white;
	padding: calc( var(--margin) * 2vh) 0 calc( var(--margin) * 2vh);
	text-align: center;
	background-color: hsl( var(--colorwheel), 80%, 40% );
}
h1 span {
	font-size: 10.3vw;
}
h2 {
	font-size: var(--h2font);
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0;
}
h3 {
	font-size: 2em;
	font-size: var(--h3font);
	margin-bottom: 0;
	line-height: 1;
}
h4 {
	font-size: 1em;
	margin-bottom: 0;
}
section#principles {
	counter-reset: principles;
}
section#principles h3 {
	counter-increment: principles;
	font-size: 1.414em;
	font-style: italic;
}
section#principles h3::before {
	content: counter(principles) '. ';
	position: absolute;
	margin-left: -1em;
}
#thesuarus ~ h2::before,
.toc section section:last-of-type ul li::before {
	content: '✎';
	position: absolute;
	margin-left: -1em;
	font-family: "Greta Display";
}
p {
	max-width: 29em;
	margin: 0 0 1em;
}
header .sub {
	font-size: 1em;
	position: absolute;
	font-family: "Greta Display",serif;
	font-style: italic;
	margin: calc( var(--margin) * -2vh - 1em) 0 0 calc( var(--margin) * 1vw);
	color: white;
	/* text-shadow: 1px 1px hsl( var(--colorwheel), 80%, 40%, .4),
				 -1px -1px hsl( var(--colorwheel), 80%, 40%, .4),
				 -1px 0 hsl( var(--colorwheel), 80%, 40%, .4),
				 1px 0 hsl( var(--colorwheel), 80%, 40%, .4),
				 0 -1px hsl( var(--colorwheel), 80%, 40%, .4),
				 0 1px hsl( var(--colorwheel), 80%, 40%, .4); */
}
@media (min-width: 50em) {
	p {
		margin-left: 0;
	}
	header .sub {
		font-size: 3vw;
	}
}

h1 + p + p {
	margin-top: 0;
	text-indent: 0;
}
header h1 {
	margin: 0;
	padding: calc( var(--margin) * 2vh) 0 calc( var(--margin) * 2vh) calc( var(--margin) * 1vw);
	text-align: left;
}

@supports (-webkit-hyphenate-limit-lines: 2) {
	p {
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-lines: 2;
		-webkit-hyphenate-limit-chars: 6 3 2;
	}
}
@supports (hyphenate-limit-lines: 2) {
	p {
		hyphens: auto;
		hyphenate-limit-lines: 2;
		hyphenate-limit-chars: 6 3 2;
	}
}
button {
	font: inherit;
	color: inherit;
	border: 1px solid currentColor;
}
button:hover,
button:focus {
	color: white;
	background-color: black;
}
q {
	font-style: italic;
}
abbr {
	font-family: "Greta Sans 2";
}
kbd {
	font-family: "Greta Sans 2";
	border-radius: .2em;
	line-height: 1;
	padding: 0 .3em;
	background: hsla(0, 0%, 92%,.7);
	box-shadow: inset 0 2px 0 white,
				inset 0 3px 0 hsla(0, 0%, 82%,1),
				inset 0 -1px 0 hsla(0, 0%, 82%,1),
				inset 1px 0 0 hsla(0, 0%, 82%,1),
				inset -1px 0 0 hsla(0, 0%, 82%,1);
	font-style: normal;
}
strong {
	color: red;
}
ul,
ol {
	margin: 0 0 1em;
	padding: 0 0 0 1em;
}
dl {
	margin: 0 0 1em;
	padding-left: 1em;
	border-left: .25em solid silver;
}
dt {
	font-weight: bold
}
dd {
	font-style: italic;
	margin: 0;
}
dd + dt {
	margin: .5em 0 0;
}




/* Blockquote */
.blockquote, 
blockquote {
	font-style: italic;
	margin: 1em 0 !important;
	text-indent: 0 !important;
	padding-left: 1em;
	border-left: .25em solid silver;
}
.blockquote::before, 
blockquote {
	
}
.blockquote + p, 
blockquote {
	margin-top: 1em !important;
	text-indent: 0 !important;
}
blockquote q,
blockquote q::before,
blockquote q::after {
	font-style: normal;
}
blockquote footer {
	margin: 0;
}
blockquote footer cite {
	font-style: normal
}
[data-syn] {
	display: none;
}
[data-thesaurus] {
	border-bottom: 1px solid hsl( var(--colorwheel), 80%, 40% );
	cursor: help;
	color: black;
	text-decoration: none;
}
[data-thesaurus].hover,
[data-thesaurus]:focus {
	cursor: pointer;
	color: red;
	border-color: red; 
	text-decoration-color: inherit;
}
@supports (text-decoration: underline dotted black ) {
	[data-thesaurus] {
		border: none;
		text-decoration: underline solid hsl( var(--colorwheel), 80%, 40% );
	}
}
#thesaurusList {
	transform: scale(0);
}
#thesaurusList:not(:empty){
	transform: scale(1);
	position: absolute;
	top: 0;
	font-size: .7rem;
	min-width: 20em;
	width: calc(25% - 2.777775vw - 1em);
	max-height: 44vh;
	overflow: hidden;
	right: calc(5.5555vw + 1em);
	border: 1px solid silver;
	background: white;
	box-shadow: .13em .13em .3em hsla(0, 0%, 50%, .5);
	padding: 1em 1em 0;
	transition: transform .1s .3s cubic-bezier(0.19, 1, 0.22, 1);
}
#thesaurusList dt {
	font-weight: bold;
}
#thesaurusList dd {
	margin: 0;
	padding: 0;
}
#thesaurusList blockquote ol {
	margin: 0 0 0 .5em;
	padding: 0;
}
#thesaurusList h3 {
	font-size: 1em;
	font-style: italic;
	margin-bottom: 0;
}

/* TAGS */
footer a[href^="/principles/"],
.next + p a[href^="/principles/"],
[class^="principle-"] h2 a {
	color: black;
	text-decoration: none;
	background: hsl(230, 53%, 80% );
	transition: .2s;
}
footer a[href="/principles/prioritise-identity/"],
.next + p a[href="/principles/prioritise-identity/"],
[class$="prioritise-identity"] h2 a {
	background: hsla(194, 73%, 74%, 1.0);
	box-shadow: -.2em 0 0 0 hsla(194, 73%, 74%, 1.0),
				.2em 0 0 0 hsla(194, 73%, 74%, 1.0);
}
footer a[href="/principles/add-nonsense/"],
.next + p a[href="/principles/add-nonsense/"],
[class$="add-nonsense"] h2 a {
	background: hsla(88, 53%, 54%, 1.0);
	box-shadow: -.2em 0 0 0 hsla(88, 53%, 54%, 1.0),
				.2em 0 0 0 hsla(88, 53%, 54%, 1.0);
}
footer a[href="/principles/study-situation/"],
.next + p a[href="/principles/study-situation/"],
[class$="study-situation"] h2 a {
	background: hsla(54, 80%, 62%, 1.0);
	box-shadow: -.2em 0 0 0 hsla(54, 80%, 62%, 1.0),
				.2em 0 0 0 hsla(54, 80%, 62%, 1.0);
}
footer a[href="/principles/ignore-conventions/"],
.next + p a[href="/principles/ignore-conventions/"],
[class$="ignore-conventions"] h2 a {
	background: hsla(328, 62%, 71%, 1.0);
	box-shadow: -.2em 0 0 0 hsla(328, 62%, 71%, 1.0),
				.2em 0 0 0 hsla(328, 62%, 71%, 1.0);
}
[class^="principle-"] h2 a:hover,
[class^="principle-"] h2 a:focus,
footer a[href^="/principles/"]:hover,
footer a[href^="/principles/"]:focus,
.next + p a[href^="/principles/"]:hover,
.next + p a[href^="/principles/"]:focus {
	background: hsl( var(--colorwheel), 80%, 40% );
	box-shadow: -.2em 0 0 0 hsl( var(--colorwheel), 80%, 40% ),
				.2em 0 0 0 hsl( var(--colorwheel), 80%, 40% );
	color: white;
}


/* TOC */
.toc ul,
.toc ol {
	margin: 1em 0;
	padding: 0;
}
.toc li {
	position: relative;
}
.toc ul li {
	list-style: none;
}
.toc ol li {
	font-weight: bold;
}
.toc ol li p + p {
	font-weight: normal;
}
.toc ul li::before {
	content: '☞';
	position: absolute;
	margin-left: -1.5em;
	color: hsl( var(--colorwheel), 80%, 40% );
}
.toc ul li.visited::before {
	content: '☛';
	color: silver;
}
.toc a {
	font-weight: bold;
	color: black;
}
.toc a:hover,
.toc a:focus {
	background-color: hsl( var(--colorwheel), 80%, 40% );
	color: white;
	text-decoration: none;
} 
.toc a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	max-width: 30em;
}
.toc a:hover::before,
.toc a:focus::before {
	background-color: hsla( var(--colorwheel), 80%, 40%, .1);
}

.toc p + p {
	text-indent: 0;
	font-style: italic;
	margin-top: -1em;
}
.toc .progress {
	color: red;
}
.toc .done {
	color: green;
}
.toc section section:last-of-type ul {
	columns: 1;
}
.toc section section:last-of-type ul a {
	position: relative;
}

@media print {
	@page {
		margin-left: 3cm;
		margin-right: 3cm;
		margin-top: 3cm;
		margin-bottom: 6cm;
	}
	html {
		font-size: 10pt;
	}
}

@keyframes colorwheel {
	0% {
		background-color: hsl(0,80%,40%);
	
	}
	8.3% {
		background-color: hsl(30,80%,40%);
	
	}
	16.6% {
		background-color: hsl(60,80%,40%);
	
	}
	25% {
		background-color: hsl(90,80%,40%);
	
	}
	33.3% {
		background-color: hsl(120,80%,40%);
	
	}
	41.6% {
		background-color: hsl(150,80%,40%);
	
	}
	50% {
		background-color: hsl(180,80%,40%);
	
	}
	58.3% {
		background-color: hsl(210,80%,40%);
	
	}
	66.6% {
		background-color: hsl(240,80%,40%);
	
	}
	75% {
		background-color: hsl(270,80%,40%);
	
	}
	83.3% {
		background-color: hsl(300,80%,40%);
	
	}
	91.6% {
		background-color: hsl(330,80%,40%);
	
	}
	100% {
		background-color: hsl(0,80%,40%);
	
	}
}

/* IMAGES and Videos */
figure {
	margin: 0 0 1em;
	padding: 0;
}
figcaption {
	font-style: italic;
}
figcaption em {
	font-style: normal;
}
body > video {
	margin: 0 0 1em;
}
.marginal-image {
	margin: 1em 0 0;
	position: relative;
}
.marginal-image figure {
	position: absolute;
	margin: 0.3em 0 0 -50%;
	width: 50%;
	width: calc(50% - 1em);
}
.marginal-image figcaption {
	font-size: .8em;
	font-style: italic;
}
.widescreen-image figure div {
	padding-bottom: 44%;
	position: relative;
}
.widescreen-image img {
	position: absolute;
	width: 100%;
	height: 100%;
}
@media (min-width: 50em) {
	.into-the-margin div {
		margin-left: -50%;
	}
	
	.margin-image {
		position: absolute;
		margin-top: .4em;
		margin-left: calc(-33% + 2.777775vw);
		max-width: calc(33% - 2.777775vw - 1em);
		min-width: calc(33% - 2.777775vw - 1em);
	}
}
@media (min-width: 80em) {
	.margin-image {
		margin-left: calc(-25% + 2.777775vw);
		max-width: calc(25% - 2.777775vw - 1em);
		min-width: calc(25% - 2.777775vw - 1em);
	}
}

.next {
	position: relative;
	padding: 1em;
	font-style: italic;
	background-color: hsla( var(--colorwheel), 80%, 40%, .2);
}
.next em {
	font-style: normal;
}
.next::before {
	content: '☞ ';
	color: hsl( var(--colorwheel), 80%, 20% );
}
.next:hover::before {
	color: black;
}
.next a {
	color: black;
	text-decoration: none;
	transition: .2s;
}
.next a::before {
	transition: .2s;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid hsl( var(--colorwheel), 80%, 40% );
	content: '';
	background-color: hsla( var(--colorwheel), 80%, 40%, 0);
}
.next a:hover::before,
.next a:focus::before {
	background-color: hsla( var(--colorwheel), 80%, 40%, .2);
}

/* NOTES */
.footnote {
	font-feature-settings: "subs" 1;
	font-variant-position: super;
}
.notes,
.footnotes {
	font-size: .80em;
	font-style: italic;
}
.footnotes ol {
	margin: 0;
	padding: 0;
}
.footnotes li {
	padding-bottom: 0;
}
.footnotes hr {
	display: none;
}
.footnotes p {
	margin: 0;
}
.footnotes p + p {
	text-indent: 1em;
}

[href^="#note"],
[href^="#fn"] {
	color: inherit;
	border-bottom: 1px solid silver;
	text-decoration: none;
}
@supports (text-decoration-color: hsl(var(--pleasurable))) {
	[href^="#note"],
	[href^="#fn"] {
		text-decoration-color: silver;
	}
}
.noteSpan sup {
	position: absolute;
	left: -1000em;
}
@media (min-width: 50em) {
	.noteSpan + .footnote {
		position: absolute;
		left: -1000em;
	}
	.noteSpan sup {
		position: static;
	}
}
@media (min-width: 50em) {
	.positioned {
		position: absolute;
		padding-bottom: 1em;
		width: calc(32.333% - 2.777775vw - 1em);
		margin-left: calc(-32.333% + 2.777775vw);
		border-bottom: 1em solid white;
		padding-right: .5em;
		box-sizing: border-box;
		box-shadow: inset -.3em 0 0 0 hsla(0,0%,0%,.1);
		background: white;
		transition: background .15s;
	}
	.positioned.first {
		position: static;
		width: auto;
		margin: 0;
	}
	.positioned .reversefootnote {
		display: none;
	}
	.positioned.hover,
	.positioned:hover,
	.noteSpan.hover	,
	.footnote.hover {
		background: hsla(0,0%,0%,.1);
	}
	.positioned:nth-of-type(1){ list-style: '➀ '; }
	.positioned:nth-of-type(2){ list-style: '➁ '; }
	.positioned:nth-of-type(3){ list-style: '➂ '; }
	.positioned:nth-of-type(4){ list-style: '➃ '; }
	.positioned:nth-of-type(5){ list-style: '➄ '; }
	.positioned:nth-of-type(6){ list-style: '➅ '; }
	.positioned:nth-of-type(7){ list-style: '➆ '; }
	.positioned:nth-of-type(8){ list-style: '➇ '; }
	.positioned:nth-of-type(9){ list-style: '➈ '; }
	.positioned:nth-of-type(10){ list-style: '➉ '; }
}
@media (min-width: 80em) {
	.positioned {
		width: calc(25% - 2.777775vw - 1em);
		margin-left: calc(-25% + 2.777775vw);
	}
	.positioned.first {
		width: calc(25% - 2.777775vw - 1em);
		margin-left: calc(-47% + 2.777775vw);
		position: absolute;
	}
}

@media (min-width: 90em) {
	.positioned,
	.positioned.first {
		width: 14.5rem;
		margin-left: -15rem;
	}
	.positioned.first {
		margin-left: -30rem;
	}
}