/*
COLORS: TO BE UPDATED

black: 08111e;
red: ef2929 / a40000;
orange: ff4500;
blue: 729fcf / 204a87 / 3465a4;
green: 73d216;
light gray: eeeeec / d3d7cf;
gray: 555753;

SCALE: 2^(1/3);
*/

/* ---- GENERAL ---- */
html {
	font-size: 150%;
}

body {
	margin: 0;
	color: #08111e;
	font-family: "Raleway", sans-serif;
	font-size: 1rem;
	font-weight: 400;
}

/* ---- HEADER ----*/

header {
	text-align: center;
}

header h1 {
	margin: 0;
	font-size: 2.52rem;
	background-image: linear-gradient(to bottom, white, white 60%, lightgray 60%, lightgray 95%, white 95%);
}

header h1::after {
	content: ".*";
	color: #ff4500;
}

header a {
	color: inherit;
	text-decoration: none;
}

header nav ul {
	margin: 0;
	padding: 0;
	font-size: 1.587rem;
}
header nav li {
	margin: 0 0.25em;
	list-style-type: none;
	display: inline-block;
}

header nav li::before {
	content: ". ";
	color: orangered;
}

header nav li a:hover {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(to bottom, white, white 60%, lightgray 60%, lightgray 100%);
}

header,
header h1,
header nav li a {
	font-family: "Raleway";
	font-weight: 900;
}

/* ---- BODY COPY ----*/

article {
	font-family: "Raleway";
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 900;
}

/* ---- CONTENTS SPACING AND SCALE----*/

header, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
	margin-top: 0;
}
p {
	line-height: 1.4;
	margin-top: 1em;
	font-size: 1rem;
}
h1 {
	margin-top: 1em;
	font-size: 2rem;
}
h2 {
	margin-top: 1em;
	font-size: 1.587rem;
}
h3 {
	font-size: 1.26rem;
	margin-top: 1rem;
}
h4, h5, h6 {
	margin-top: 1rem;
	color: gray;
	font-size: 1rem;
}

article ul,
article ol {
	margin-top: 0;
}

article li {
	line-height: 1.4;
}

/* ---- OTHER BODY COPY VISUAL STYLING ---- */

article a {
	text-decoration: none;
	border-bottom: 0.1em dotted;
	color: #3465a4;
}

article a:hover {
	border-bottom: 0.1em solid;
}

.prism article code,
article code {
	font-family: 'Anonymous Pro', 'Menlo', 'Consolas', 'Ubuntu Mono', 'Courier New', 'Courier', fixed;
}

article code {
	background: #eeeeec;
	border: 1px solid gray;
	border-radius: 0.2em;
	padding: 0.1em 0.1em;
}

article pre {
	width: 100%;
	overflow: auto;
	border: 1px solid gray;
	background: #eeeeec;
}

article pre code {
	border: none;
	background: inherit;
}

.prism article pre code {
	font-size: 0.8rem;
}
.prism article pre {
	width: 100%;
	box-sizing: border-box;
	padding: 0.1em 0.3em;
}

blockquote {
	font-weight: 200;
	font-size: 1rem;
	margin: 0 2em;
	padding-left: 0.5em;
	margin-top: 1em;
	position: relative;
}
blockquote::before {
	content:"”";
	color: lightblue;
	font-size: 4rem;
	font-weight: 900;
	position: absolute;
	left: -2rem;
	top: -0.2em;
}

article img,
article video {
	width: 100%;
}

/* ---- UTILITY CLASSES ---- */

.rebox {
	position: relative;
	padding-bottom: 56.25%;
	/* that's 9/16 in percentages. This will yield black bars if the video
	has a different ratio */
	padding-top: 25px;
	height: 0;
	margin-top: 1rem;
}

.rebox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---- POST TO POST NAVIGATION ----*/
article + nav {
	margin-top: 1em;
}

nav a {
	text-decoration: none;
	font-weight: 700;
	color: #3465a4;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	display: inline-block;
}

nav li.previous{
	float: left;
}

nav li.previous a::before {
	content: "« ";
}

nav li.next{
	float: right;
}

nav li.next a::after {
	content: " »";
}

/* ---- FOOTER ---- */

footer {
	font-size: 0.77rem;
	clear: both;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 0.5em;
	color: gray;
}

/* ---- MEDIA QUERIES - BREAK AT 480, 768, 768+ ---- */

@media only screen and (max-width: 35em) {
	html {
		font-size: 110%;
	}
	body {
		margin: 0 1em;
	}

	header nav ul {
		font-size: 1.26rem;
	}

	article p,
	article li,
	article h1,
	article h2,
	article h3,
	article h4,
	article h5,
	article h6 {
		line-height: 1.4;
	}

	article h1,
	article h2,
	article h3,
	article h4,
	article h5,
	article h6 {
		font-weight: 700;
	}
}

@media only screen and (min-width: 35em) and (max-width: 50em) {
	html {
		font-size: 135%;
	}
	body {
		margin: 0 1.5em;
	}

	article p,
	article li {
		line-height: 1.4;
	}
}

@media only screen and (min-width: 50em) {
	body {
		width: 30em;
		margin: 0 auto;
	}
	article p,
	article li {
		line-height: 1.6;
	}
}