/*
 imixs.org
*/

html {
	line-height: 1.5;
	font-family: 'Open Sans', sayns-serif;
	color: #333;
}

body {
	margin: 0;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
	color: #3886CA;
	text-decoration: inherit;
}


hr {
	border-color: #808080 #808080 #ddd;
	border-style: none none solid;
	border-width: 0 0 1px;
	clear: both;
	margin: 10px auto;
	margin-bottom: 30px;
}

button, select {
	text-transform: none;
}

legend {
	padding: 0;
}

ol, ul, menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	/* 1 */
	font-size: 1em;
	color: #6194bf;
}
div pre {
	color: #34648c;
}
/*
Add the correct font size in all browsers.
*/
small {
	font-size: 80%;
}


header {
	position: fixed;
	width: 100%;
	background-color: #40b6b7;
}

/* https://polypane.app/blog/the-perfect-responsive-menu */
header nav {
	padding: 10px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
header nav a {
	color: #fff;
}

header nav .nav-title {
	align-items: center;
	display: flex;
	order: 1;
	font-size: 1.5rem;
	margin-left: 10px;
}

header nav .nav-menu {
	align-items: center;
	display: flex;
	order: 3;
	flex-wrap: wrap;
	width: 100%;
}

header nav  .nav-github {
	order: 2;
}

header nav .nav-menu ul {
	flex-direction: row;
	width: 100%;
}

header nav .nav-menu ul li {
	justify-content: space-between;
	padding: 0 0px;
	border-bottom: 1px solid #fff;
	font-size: 1.2rem;
	line-height: 2.5rem;
	margin-left: 10px;
	padding-left: 10px;
}

header nav .nav-menu ul li:hover {
	background: #fff;
}

header nav .nav-menu ul li a {
	width: 100%;
	display: inline-block;
}

header nav .menu-button {
	background: transparent;
	border: none;
	color: #EEE;
}

header nav .menu-button svg {
	width: 1.9rem;
	height: 1.9rem;
}

/* Menu on large displays */
@media ( min-width : 1024px) {
	nav button {
		display: none;
	}
	header nav .nav-menu {
		flex-wrap: nowrap;
		width: auto;
		order: 2;
	}
	header nav .nav-menu ul {
		display: flex;
	}
	header nav .nav-menu ul li {
		padding: 0 20px;
		font-size: 1rem;
		line-height: inherit;
		margin-left: 0;
		border-bottom: none;
	}
	header nav .nav-menu ul li:hover {
		background: transparent;
	}
	header nav   .nav-github {
		order: 3;
	}
}





section {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(12, minmax(64px, 110px));
	column-gap: 40px;
}


section h1.lead {
	font-size: 3.75rem;
	line-height: 1;
	font-weight: 800;
	margin: 0 0 40px 0;
}

section p {
	color: #555;
}

section p.lead {
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: #555;
}

section h2.lead {
	font-weight: 800;
}

section li {
	margin: 0 10px 10px 0;
	display: flex;
}

section li svg {
	margin-right: 10px;
	height: 1.25rem;
	color: #FCB802;
}


section .button {
	background-color: #FCB802;
	border-radius: 0.5rem;
	padding: 0.625rem 1.25rem;
	color: #fff;
	font-size: 1.3em;
}

section .terminal {
	background-color: #000;
	color: #fff;
	min-height: 400px;
	padding: 20px;
	border-radius: 10px;
	border: 3px solid #F3BF36;
}

section .image-gallery-item {
	grid-column-start: span 2;
}

/* Footer */
footer {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

footer section div {
	grid-column-start: span 3;
}

footer h3 {
	font-size: 0.875rem;
	text-transform: uppercase;
	font-weight: 600;
}

.poweredBy {
	font-size: 0.7em;
}

@media ( max-width : 768px) {
	section {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		grid-column-gap: inherit;
	}
	footer section div {
	grid-column-start: span 1;
	}
	section .image-gallery-item {
		grid-column-start: 1;
		text-align: center;
	}
	section .image-gallery-item img {
		max-height: 40px;
	}
	section h1.lead {
    	font-size: 2.75rem;
	}
	section .button {
    	font-size: 1.1em;    
	}
}