/* ==================
	Base styles
================== */

/* Colors:
	Orange = #ff773d
	Dark orange = #ff6b2b
*/

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font: 16px/1.5 "Roboto", "Helvetica", "Arial", sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	color: #424242;
	background-color: #f8f8f8;
	text-align: left;
}

a, a:visited {
	text-decoration: none;
	color: #ff6b2b;
}

a:hover, a:active {
	color: #ff6b2b;
	text-decoration: underline;
}

h1 {
	margin: 0 0 .5rem;
	font-size: 1.6rem;
	line-height: 2.5rem;
}

h2 {
	margin: 2rem 0 .5rem;
	font-size: 1.4rem;
	line-height: 2rem;
}

h3 {
	margin: 1.5rem 0 .5rem;
	font-size: 1.2rem;
	line-height: 1.75rem;
}

h4 {
	margin: 1.25rem 0 .25rem;
	font-size: 1rem;
	line-height: 1.5rem;
}

ul, ol {
	margin-left: 0;
	padding-left: 1.8rem;
}

img {
	max-width: 100%;
	height: auto;
}

code, pre {
	background-color: #f8f8f4;
	font-family: "Menlo", "Consolas", "Monaco", "Ubuntu Mono", "Andale Mono", "Bitstream Vera Sans Mono", monospace;
	font-size: 13px;
}

/* inline code */
code {
	word-wrap: break-word; /* old syntax (IE/Edge) */
	overflow-wrap: anywhere;
	word-break: break-word;
	padding: 1px 3px;
}

/* block code */
pre {
	padding: 1rem;
	line-height: 1.3;
	white-space: pre-wrap;
}
pre code {
	padding: 0;
	color: inherit;
	font-family: inherit;
	tab-size: 4;
	font-size: 13px;
}



/* ==================
	Layout
================== */

.container {
	max-width: 1200px;
}

.wave-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 170px;
	background: transparent url("../images/wave-combo.svg") 20% top/cover no-repeat;
}

@media (min-width: 1500px) {
	.wave-container {
		height: 200px;
		background-size: 100%;
	}
}

.header {
	position: fixed;
	top: 0;
	z-index: 25;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
.header.sticky {
	background-color: #ff773d;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-logo {
	margin: 1rem;
}

.logo-img {
	display: block;
}

.top-nav {
	display: flex;
	flex-grow: 1;
	align-items: center;
	overflow: auto;
}
a.main-nav-link {
	padding: 0.5rem 0.8rem;
	border-radius: 0.25rem;
	color: #fff;
	font-weight: bold;
	white-space: nowrap;
	transition: background-color 0.2s ease-in-out;
}
a.main-nav-link:hover {
	background-color: rgb(0, 0, 0, 0.05);
	text-decoration: none;
}
a.main-nav-link-separate {
	margin-left: auto;
}

.page-container {
	margin: 9rem auto 0;
	padding: 0 0.25rem;
	max-width: 1280px;
}
.docs-container {
	display: grid;
	grid-template-columns: 6fr;
	padding: 0 0.5rem;
}

.page-content {
	padding: 0.8rem 1rem;
	border: 1px solid #dadce0;
	border-radius: 0.5rem;
	background-color: #fff;
	box-shadow: 2px 2px 4px rgba(80, 80, 80, 0.1);
}
.page-sidebar {
	padding: 1.5rem 1rem;
}

.page-sidebar-toggle {
	display: inline-block;
	cursor: pointer;
	border: 1px solid #dadce0;
	padding: 0.5rem;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #ff773d;
}
.page-sidebar-toggle:before {
	content: "\e164";
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: initial;
	color: inherit;
	margin-right: 6px;
}
.page-sidebar-content {
	display: none;
	column-count: 2;
}
.page-sidebar-content.expanded {
	display: block;
}

.docs-nav-title {
	position: relative;
	margin-top: 0;
	padding-left: 2rem;
}
.docs-nav-title:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "article";
	height: 1.5rem;
	width: 1.5rem;
	font: normal 1.5rem 'Material Icons';
	color: #ff773d;
}

.docs-nav {
	list-style: none;
	margin: 0 0 1rem;
	padding-left: 2rem;
}

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
	margin: 3rem auto 0;
	padding: 3rem 1rem;
	border-top: 1px solid #dadce0;
}
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	margin-right: 1rem;
}
.footer-nav-link {
	margin: 0 1rem;
}
.credit {
	margin-left: 1rem;
}

@media (min-width: 540px) {
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.25rem;
	}
	h4 {
		font-size: 1rem;
	}
	ul, ol {
		padding-left: 2.2rem;
	}

	.page-container {
		padding: 0 1rem;
	}
	.page-content {
		padding: 1.6rem 2rem;
	}

	.page-sidebar-content {
		column-count: 3;
	}
}

@media (min-width: 800px) {
	.header {
		justify-content: flex-start;
	}
	.header-logo {
		margin-right: 2rem;
	}

	.secondary-nav {
		margin-left: auto;
	}

	.page-container {
		margin-top: 12rem;
	}

	.page-sidebar-toggle {
		display: none;
	}
	.page-sidebar-content {
		display: block;
		column-count: 1;
	}

	.docs-container {
		grid-template-columns: 1fr 5fr;
		grid-gap: 1rem;
	}

	.page-content {
		padding: 1.6rem 2rem;
	}
	.page-sidebar {
		padding: 1.5rem 1rem;
	}
}

@media (min-width: 1220px) {
	a.main-nav-link {
		font-size: 1.125rem;
	}
}


/* ==================
	Homepage
================== */

.home-intro {
	max-width: 800px;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 1.4rem;
	font-weight: normal;
}

.showcase-cols {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	margin: 2rem auto;
	max-width: 1080px;
}

.card-showcase {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	flex: 1 0 100%;
	padding: 0.8rem 1rem;
	border: 1px solid #dadce0;
	border-radius: 0.5rem;
	background-color: #fff;
	box-shadow: 2px 2px 4px rgb(80, 80, 80, 0.1);
	text-align: left;
}

.card-showcase-icon {
	display: flex;
	position: relative;
	overflow: hidden;
	flex: 0 0 50px;
	align-items: center;
	justify-content: center;
	border-radius: 52px;
	width: 50px;
	height: 50px;
	background-color: #ff773d;
	color: #ffffff;
	font-size: 2rem;
	margin-right: 2rem;
}
.card-showcase-icon:after {
	content: "";
	position: absolute;
	left: 50%;
	width: 50%;
	height: 100%;
	background-color: #000000;
	opacity: 0.04;
}
.card-showcase-icon .material-icons {
	font-size: inherit;
}

.card-showcase-info h4 {
	margin: 0;
}
.card-showcase-info p, .card-showcase-info ul {
	color: #707070;
}
.card-showcase-info ul {
	padding-left: 1.25rem;
}

.text-small {
	font-size: 0.85rem;
}

@media (min-width: 540px) {
	.home-intro {
		font-size: 1.6rem;
	}
}

@media (min-width: 800px) {
	.showcase-cols {
		grid-template-columns: 1fr 1fr;
	}
}



/* ==================
	Docs pages
================== */

a[href*="/releases/"][href$=".zip"] {
	margin-left: 1rem;
	padding: 0.5rem;
	vertical-align: bottom;
	border-radius: 8px;
	background: #ff773d;
	color: #fff;
	font-size: 0.75rem;
	text-transform: uppercase;
}
a[href*="/releases/"][href$=".zip"]:active,
a[href*="/releases/"][href$=".zip"]:hover {
	background: #ff6b2b;
	text-decoration: none;
}


/* ==================
	Syntax highlighting
================== */

.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #808080 } /* Comment */
.highlight .err { color: #f00000; background-color: #f0a0a0 } /* Error */
.highlight .k { color: #008000 } /* Keyword */
.highlight .o { color: #303030 } /* Operator */
.highlight .cm { color: #808080 } /* Comment.Multiline */
.highlight .cp { color: #507090 } /* Comment.Preproc */
.highlight .c1 { color: #808080 } /* Comment.Single */
.highlight .cs { color: #cc0000 } /* Comment.Special */
.highlight .gd { color: #a00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ff0000 } /* Generic.Error */
.highlight .gh { color: #000080 } /* Generic.Heading */
.highlight .gi { color: #00a000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #c65d09 } /* Generic.Prompt */
/* .highlight .gs { } */ /* Generic.Strong */
.highlight .gu { color: #800080 } /* Generic.Subheading */
.highlight .gt { color: #0040d0 } /* Generic.Traceback */
.highlight .kc { color: #008000 } /* Keyword.Constant */
.highlight .kd { color: #008000 } /* Keyword.Declaration */
.highlight .kn { color: #008000 } /* Keyword.Namespace */
.highlight .kp { color: #003080 } /* Keyword.Pseudo */
.highlight .kr { color: #008000 } /* Keyword.Reserved */
.highlight .kt { color: #303090 } /* Keyword.Type */
.highlight .m { color: #6000e0 } /* Literal.Number */
.highlight .s { color: #d04020 } /* Literal.String */
.highlight .na { color: #0060b0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #b00060 } /* Name.Class */
.highlight .no { color: #003060 } /* Name.Constant */
.highlight .nd { color: #505050 } /* Name.Decorator */
.highlight .ni { color: #800000 } /* Name.Entity */
.highlight .ne { color: #f00000 } /* Name.Exception */
.highlight .nf { color: #0060b0 } /* Name.Function */
.highlight .nl { color: #907000 } /* Name.Label */
.highlight .nn { color: #0e84b5 } /* Name.Namespace */
.highlight .nt { color: #007000 } /* Name.Tag */
.highlight .nv { color: #906030 } /* Name.Variable */
.highlight .ow { color: #000000 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #6000e0 } /* Literal.Number.Float */
.highlight .mh { color: #005080 } /* Literal.Number.Hex */
.highlight .mi { color: #0000d0 } /* Literal.Number.Integer */
.highlight .mo { color: #4000e0 } /* Literal.Number.Oct */
.highlight .sb { color: #d04020 } /* Literal.String.Backtick */
.highlight .sc { color: #0040d0 } /* Literal.String.Char */
.highlight .sd { color: #d04020 } /* Literal.String.Doc */
.highlight .s2 { color: #d04020 } /* Literal.String.Double */
.highlight .se { color: #606060; } /* Literal.String.Escape */
.highlight .sh { color: #d04020 } /* Literal.String.Heredoc */
.highlight .si { color: #d04020 } /* Literal.String.Interpol */
.highlight .sx { color: #d02000; color: #d04020 } /* Literal.String.Other */
.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #d04020 } /* Literal.String.Single */
.highlight .ss { color: #a06000 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #306090 } /* Name.Variable.Class */
.highlight .vg { color: #d07000 } /* Name.Variable.Global */
.highlight .vi { color: #3030b0 } /* Name.Variable.Instance */
.highlight .il { color: #0000d0 } /* Literal.Number.Integer.Long */