/*
Theme Name: Nerd Mississippi
Theme URI: http://vasilis.nl/nerd/
Description: Nerd Theme using the Mississippi font
Version: 0.1
Author: Vasilis van Gemert
Author URI: http://vasilis.nl/
*/

/* ************************************************
Basic styling
************************************************ */
:root {
	--margin: 9.111;
	--introtext: 1.414;
	--h2: 2.827;
	--h3: 1.999;
	--h4: 1.414;
}
@media (max-width: 40em) {
	:root {
		--margin: 4.5555;
		--introtext: 1;
		--h2: 1.999;
		--h3: 1.414;
		--h4: 1;
	}
}

html {
	display: grid;
	grid-template-columns: calc(var(--margin) * 1vw) 1fr calc(var(--margin) * 1vw);
	grid-template-rows: calc(var(--margin) * 1vw) 1fr calc(var(--margin) * 2vw);
	font-size: 120%;
}
body {
	font-family: 'Nara Sans 9', sans-serif;
	line-height: 1.414;
	grid-column-start: 2;
	grid-row-start: 2;
	font-feature-settings: "liga" 1;
}

@supports (font-variant-ligatures: common-ligatures) {
    body {
        font-feature-settings: normal;
        font-variant-ligatures: common-ligatures;
    }
}
article {
	margin-bottom: 11.1111vh;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
article:nth-of-type(3n + 2) {
	align-items: flex-start;
}
h1 a {
	text-align: right;
	width: 100%;
	max-width: calc(30rem * 2);
}
article:nth-of-type(3n + 2) h1 a {
	text-align: left;
}
article:nth-of-type(3n + 2) h1::before {
	right: 0;
}
a:hover,
a:focus {
	color: red;
}
.home article {
	position: relative;
}
.more-link {
	color: black;
}

/* ************************************************
Default heading styles
************************************************ */
h1 {
	font-family: "Mississippi Regular", impact, serif;
	font-weight: normal;
	font-size: 15vw;
	font-size: calc(2em + 14vw);
	line-height: .7;
	margin: 0;
	position: relative;
	font-size-adjust: .42;
}
h1 a {
	text-decoration: none;
	display: block;
	transition: .071s;
	color: black;
}
h1 a:hover,
h1 a:focus {
	filter: drop-shadow(.1em .1em hsla(340, 80%, 10%, 0.1));
	color: black;
	text-shadow: 1px 1px 0 white;
}
h1 .gradient,
h2.trigger span {
	display: inline-block;
	position: relative;
	z-index: -1;
	mix-blend-mode: multiply;
}
h2.trigger {
	position: relative;
}
h1::before,
h1 .gradient::before,
h2.trigger::before,
h2.trigger span::before {
	content: '';
	width: 70%;
	height: .7em;
	height: calc(.3em + 35%);
	position: absolute;
	z-index: -1;
}
h1::before,
h2.trigger::before {
	top: 50%;
	transform: translateY(-50%);
}
h1 .gradient::before,
h2.trigger span::before {
	filter: hue-rotate(120deg);
	height: .9em;
}
h2.trigger span::before {
	height: 1.1em;
	margin-left: -.5em;
}
h1 .gradient:last-of-type::before {
	filter: hue-rotate(240deg);
}
.started .gradient::before {
	transform: rotate(10deg);
	animation: rotateSpans 1s cubic-bezier(.18,.78,.44,.96) reverse forwards;
}
.started .gradient:last-of-type::before {
	transform: rotate(-10deg);
	animation: rotateSpans 2s cubic-bezier(0,1.14,.44,.96) reverse forwards;
}
@keyframes rotateSpans {
	100% {
		transform: rotate(0deg);
	}
}
@media (min-width: 40em) {
	.join {
		white-space: nowrap;
	}
}

/* ************************************************
Bottom Right version of heading
************************************************ */

.bottomRight {
	font-family: "Mississippi Gradient BottuRgTA", impact, serif;
	
}
.wf-mississippigradientbotturgta-n4-active .bottomRight,
.wf-mississippigradientbotturgta-n4-inactive .bottomRight,
.wf-active .bottomRight {
	color: black;
}
h1 a > .bottomRight {
	font-size: 82%;
}

/* Don’t' use */
.join > .bottomRight {
	font-size: 137%;
	margin-top: -0.3em;
}

/* ************************************************
Bottom Left version of heading
************************************************ */

.bottomLeft {
	font-family: "Mississippi Gradient BottYYlTG", impact, serif;
	
}
.wf-mississippigradientbottyyltg-n4-active .bottomLeft,
.wf-mississippigradientbottyyltg-n4-inactive .bottomLeft,
.wf-active .bottomLeft {
	color: black;
}
h1 a > .bottomLeft {
	font-size: 137%;
}
.join > .bottomLeft {
	font-size: 82%;
}

/* ************************************************
Top Left version of heading
************************************************ */

.topLeft {
	font-family: "Mississippi Gradient top left", impact, serif;
	
}
.wf-mississippigradienttopleft-n4-active .topLeft,
.wf-mississippigradienttopleft-n4-inactive .topLeft,
.wf-active .topLeft {
	color: black;
}
/* Don’t use */
h1 a > .topLeft {
	font-size: 137%;
	transform: translate(0, .2em);
}
.join > .topLeft {
	font-size: 82%;
}

/* ************************************************
Top Right version of heading
************************************************ */

.topRight {
	font-family: "Mississippi Gradient top right", impact, serif;
	
}
.wf-mississippigradienttopright-n4-active .topRight,
.wf-mississippigradienttopright-n4-inactive .topRight,
.wf-active .topRight {
	color: black;
}
h1 a > .topRight {
	font-size: 82%;
}
.join > .topRight {
	font-size: 137%;
	transform: translate(0, .2em);
	margin-top: -0.3em;
}


/* ************************************************
Start typographic styling
************************************************ */

article > *:not(h1),
body > footer {
	width: 100%;
	max-width: 30rem;
}

h1 + p,
h1 + .maybeoutdated + p {
	max-width: 30em;
	font-size: calc(var(--introtext) * 1em);
	line-height: 1.2;
	position: relative;
	margin-top: 1em;
	text-shadow: -1px -1px white,
				-1px 1px white,
				1px -1px white,
				1px 1px white;
}
.maybeoutdated {
	background-color: yellow;
	font-style: italic;
	mix-blend-mode: multiply;
	margin-bottom: 0;
}
p {
	margin: 0 0 1em;
}
p + p {
	margin-top: -1em;
	text-indent: 1em;
}
@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;
	}
}

img {
	display: block;
}
p img,
figure img {
	width: 100%;
	height: auto;
	border: 1px solid silver;
}
figure {
	margin: 0 0 1em;
}
figcaption {
	font-size: .9em;
	font-style: italic;
}
figure p {
	margin: 0;
}
h2 {
	font-size: calc(var(--h2) * 1em);
	margin-bottom: 0em;
	font-style: italic;
	line-height: 1;
	hanging-punctuation: first;
}
h3 {
	font-size: calc(var(--h3) * 1em);
	margin-bottom: 0;
	line-height: 1.2;
}
h4 {
	font-size: calc(var(--h4) * 1em);
}
blockquote {
	font-style: italic;
	font-size: calc(var(--introtext) * 1em);
	margin: 0 0 1em;
}
blockquote::before {
	content: "”";
	position: absolute;
	margin-left: -.6em;
	font-weight: 800;
	font-size: calc(var(--h2) * 1em);
	line-height: 1;
}
blockquote p {
	margin: 0;
}
q {
	font-style: italic;
}
code {
	font-family: "Greta Mono Condensed Light 4", monospace;
}
.ssh {
		background: hsl(0,0%,20%);
		color: greenyellow;
		display: block;
		padding: .5em;
		overflow-x: scroll;
		white-space: pre-wrap;
		max-width: 100%;
		min-width: 100px;
}
pre {
	white-space: pre-wrap;
	
	max-width: 100%;
}
code {
	overflow-x: auto;
}
strong {
	font-weight: 600;
	font-style: normal
}
abbr {
	font-family: "Nara Sans 10";
	font-variant: small-caps;
}


article > footer {
	font-style: italic;
}
article > footer ul {
	margin: 1em 0;
	padding: 0;
}
article > footer ul li {
	display: inline-block;
}
article > footer li:first-child::before {
	content: 'Written by ';
}
article > footer li:first-child::after {
	content: ',';
}
article > footer li:nth-child(2)::before {
	content: 'on ';
}