body {
	background: #d8e6f3;
	color: #282a36;
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
}
#banner {
	display: flex;
	align-self: center;
	justify-content: center;
	background-image: url('/logo-background');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	cursor: pointer;
}
#knitwork-logo {
	max-width: 100vmax;
}
.emphasized {
	color: #ff1786;
	font-weight: 600;
}
p {
	line-height: 1.4;
}
p > code {
	font-size: 14px;
}
a {
	text-decoration: none;
	color: #3383ff;
}
a:hover {
	text-decoration: underline;
}
a.broken, a.broken-md-link {
	color: #800;
	cursor: not-allowed;
}

h1 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	-moz-text-fill-color: #d6ff74;
	-webkit-text-fill-color: #d6ff74;
	-moz-text-stroke-color: #3383ff;
	-webkit-text-stroke-color: #3383ff;
	-moz-text-stroke-width: 1px;
	-webkit-text-stroke-width: 1px;
	font-weight: 900;
}

h2 {
	font-family: 'Source Code Pro', sans-serif;
	font-size: 22px;
	color: #3383ff;
	font-weight: 900;
}

h3 {
	font-family: 'Source Code Pro', sans-serif;
	font-size: 16px;
	color: #ff1786;
	font-weight: 900;
	text-decoration: underline;
}

b {
	color: #8763fd;
}

em {
	color: #c681ff;
}

pre {
	font-family: 'Source Code Pro', monospace;
	font-size: 13px;
}

code {
	background-color: #282a36;
	color: #f8f8f2;
}

#topic {
	display: flex;
	flex-direction: row;
	overflow-x: hidden;
	padding-top:1.5rem;
	/* display: grid; */
	/* grid-template-columns: auto auto; */
	/* max-width: 100em; */
	/* max-width: 80em; */
	/* margin: 20px auto; */
}

/* #wrapper {
	display: grid;
	justify-items: center;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
} */ /* don't seem to need this */

* {
	box-sizing: border-box;
}

.column {
	/* width: 95%; */
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: flex-start;
	/* margin: 2.5vw; */
	padding: 2.5vw;
	/* padding: 1vmax; */
}

/* topic / explanation */
#description {
	grid-row: 1 / 2;
	padding-bottom: 1vmax;
}

/* resources & references section */
#resources {
	grid-row: 3;
}

#related-topics {
	grid-row: 4;
}

/* visualizer & code */
#implementation {
	min-width: 40%;
}

/* wrapper for live visualizer */
#visualizer {
	align-items: flex-start;
	grid-row: 1;
	padding-bottom: 2vmax;
}

/* live visualizer background/container */
#output {
	grid-row: 1;
	background: #e2f3bb;
	height: 24vmax;
	width: auto;
	display: flex;
	justify-items: center;
	align-items: center;
}

/* actual visualizer */
#show-knitout {
	object-fit: cover;
	width: 100%;
	padding: 0; /* note: was 1.5% but padding confuses cursor tracking in visualizer code */
	height: 100%;
}

/* example code */
#code {
	grid-row: 2;
	margin-top: 20px;
	font-size: 14px;
	line-height:14px;
	background:#888888;
	color:#fff;
	text-align:center;
}

.carousel {
	position:absolute;
	font-size: 2.5rem;
	cursor: pointer;
}
#prev-topic,
#prev-category { /* 🢠 */
	left:2vw;
	text-align: left;
}

#next-topic,
#next-category { /* 🢡 */
	right:2vw;
	text-align: right;
}

.category-carousel {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.5rem;
	-moz-text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	-moz-text-stroke-color: black;
	-webkit-text-stroke-color: black;
	-moz-text-stroke-width: 1px;
	-webkit-text-stroke-width: 1px;
	font-weight: 900;
	padding-top: 0.5vw;
}


#prev-category::before {
	position: absolute;
	top: 55%;
	left: 0;
	content: "\1F8A6";
}

#next-category::before {
	position: absolute;
	top: 55%;
	right: 0;
	content: "\1F8A7";
}

@media screen and (max-width: 760px) {
	#topic {
		flex-direction: column;
	}
	#output {
		height: 30vmax;
	}
	/* #wrapper {
		justify-items: center;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
	} */ /* don't seem to need this */
}

@media screen and (min-width: 1200px) {
	#topic {
		padding-top:0;
	}
	.column {
		padding: 4vw;
	}
	#implementation {
		min-width: 50%;
	}
	.carousel {
		padding: 0 1.5vw;
		font-size:4rem;
	}
	.category-carousel {
		padding-top: 0.5vw;
		font-size:1.5rem;
	}
	.category-carousel::before {
		padding: 0 1.5vw;
	}
}

pre {
	tab-size: 4;
}

/* - - - - for multi-example code tabs - - - - */

/* hide the inputs used to store state */
/* NOTE: can't make display:none because that would mean they can't get focus */
.code-link {
	text-decoration: none;
	color: #8292a2;
	border: dotted;
	border-color: #3383ff;
	text-shadow: #3383ff;
}
#code > a {
	text-decoration: none;
	color: #8292a2;
	border: dotted;
	border-color: #3383ff;
	text-shadow: #3383ff;
}
/* I don't think this is used anywhere:
#graphics > input {
	font-family: 'Source Code Pro', monospace;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
*/
#graphics > input, #code > input {
	display:none;
}

/* header layout as tabs */
#graphics > .header {
	display: flex;
	font-size: 1vmax;
	padding-top: 2px;
	position: relative;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	width: 40vmax;
}
.tabs {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-flow: row;
	align-items: left;
}

#code > .tabs {
	background: #d8e6f3;
	display: flex;
	font-size: 1vmax;
	flex-flow: row;
	justify-content: begin;
	align-items: center;
	color:#000;
}

/* style sample tabs and language selectors */
.tabs > label {
	display: block;
	margin: 2px 2px 0px 2px;
	padding: 5px 10px 5px 10px;
	background: #ccc;
	box-shadow: inset 0px -10px 10px -10px #0004;
	border-radius: 4px 4px 0 0;
	border: 0;
	user-select:none;
	cursor:pointer;
}

.tabs > label:hover {
	background: #ddd;
}

#graphics > #show-img-0:checked ~ .header > .tabs > label[for='show-img-0'],
#graphics > #show-img-1:checked ~ .header > .tabs > label[for='show-img-1'],
#graphics > #show-img-2:checked ~ .header > .tabs > label[for='show-img-2'],
#graphics > #show-img-3:checked ~ .header > .tabs > label[for='show-img-3'],
#graphics > #show-img-4:checked ~ .header > .tabs > label[for='show-img-4'],
#code > #show-code-0:checked ~ .tabs > label[for='show-code-0'],
#code > #show-code-1:checked ~ .tabs > label[for='show-code-1'],
#code > #show-code-2:checked ~ .tabs > label[for='show-code-2'],
#code > #show-code-3:checked ~ .tabs > label[for='show-code-3'] {
	background: #f8f8f8;
	box-shadow: none;
	border: 1px solid #aaa;
	border-bottom: none;
	margin: 1px 1px -1px 1px;
	padding: 5px 10px 6px 10px;
	z-index: 10;
}

/* focus indicator -- important when tabbing through the page */
#graphics > #show-img-0:focus ~ .header > .tabs > label[for='show-img-0'],
#graphics > #show-img-1:focus ~ .header > .tabs > label[for='show-img-1'],
#graphics > #show-img-2:focus ~ .header > .tabs > label[for='show-img-2'],
#graphics > #show-img-3:focus ~ .header > .tabs > label[for='show-img-3'],
#graphics > #show-img-4:focus ~ .header > .tabs > label[for='show-img-4'],
#code > #show-code-0:focus ~ .header > .tabs > label[for='show-code-0'],
#code > #show-code-1:focus ~ .header > .tabs > label[for='show-code-1'],
#code > #show-code-2:focus ~ .header > .tabs > label[for='show-code-2'],
#code > #show-code-3:focus ~ .header > .tabs > label[for='show-code-3'] {
	outline: Highlight dotted 1px;
	outline: -webkit-focus-ring-color auto 5px;
}

/* show/hide code based on selected sample/language */

#graphics,
#code {
	width: 100%;
}

#graphics > .pictures > .image,
#code > .code {
	width: 100%;
	object-fit: inherit;
	/* width: 40vmax; */ /* so can be same size as background */
	display: none;
	position:relative;
}

/* prism sticks margin at the top which messes with header */
#code > .code > pre {
	margin:0;
}

#graphics > #show-img-0:checked ~ .pictures > #img-0,
#graphics > #show-img-1:checked ~ .pictures > #img-1,
#graphics > #show-img-2:checked ~ .pictures > #img-2,
#graphics > #show-img-3:checked ~ .pictures > #img-3,
#graphics > #show-img-4:checked ~ .pictures > #img-4,
#code > #show-code-0:checked ~ select[data-selected="swgn2"] ~ select[data-selected="js"] ~ #code-0-swgn2-js,
#code > #show-code-0:checked ~ select[data-selected="swgn2"] ~ select[data-selected="py"] ~ #code-0-swgn2-py,
#code > #show-code-0:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-js"] ~ #code-0-swgn2-plain-js,
#code > #show-code-0:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-py"] ~ #code-0-swgn2-plain-py,
#code > #show-code-0:checked ~ select[data-selected="swgn2"] ~ select[data-selected="knitout"] ~ #code-0-swgn2-knitout,
#code > #show-code-0:checked ~ select[data-selected="kniterate"] ~ select[data-selected="js"] ~ #code-0-kniterate-js,
#code > #show-code-0:checked ~ select[data-selected="kniterate"] ~ select[data-selected="py"] ~ #code-0-kniterate-py,
#code > #show-code-0:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-js"] ~ #code-0-kniterate-plain-js,
#code > #show-code-0:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-py"] ~ #code-0-kniterate-plain-py,
#code > #show-code-0:checked ~ select[data-selected="kniterate"] ~ select[data-selected="knitout"] ~ #code-0-kniterate-knitout,
#code > #show-code-1:checked ~ select[data-selected="swgn2"] ~ select[data-selected="js"] ~ #code-1-swgn2-js,
#code > #show-code-1:checked ~ select[data-selected="swgn2"] ~ select[data-selected="py"] ~ #code-1-swgn2-py,
#code > #show-code-1:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-js"] ~ #code-1-swgn2-plain-js,
#code > #show-code-1:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-py"] ~ #code-1-swgn2-plain-py,
#code > #show-code-1:checked ~ select[data-selected="swgn2"] ~ select[data-selected="knitout"] ~ #code-1-swgn2-knitout,
#code > #show-code-1:checked ~ select[data-selected="kniterate"] ~ select[data-selected="js"] ~ #code-1-kniterate-js,
#code > #show-code-1:checked ~ select[data-selected="kniterate"] ~ select[data-selected="py"] ~ #code-1-kniterate-py,
#code > #show-code-1:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-js"] ~ #code-1-kniterate-plain-js,
#code > #show-code-1:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-py"] ~ #code-1-kniterate-plain-py,
#code > #show-code-1:checked ~ select[data-selected="kniterate"] ~ select[data-selected="knitout"] ~ #code-1-kniterate-knitout,
#code > #show-code-2:checked ~ select[data-selected="swgn2"] ~ select[data-selected="js"] ~ #code-2-swgn2-js,
#code > #show-code-2:checked ~ select[data-selected="swgn2"] ~ select[data-selected="py"] ~ #code-2-swgn2-py,
#code > #show-code-2:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-js"] ~ #code-2-swgn2-plain-js,
#code > #show-code-2:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-py"] ~ #code-2-swgn2-plain-py,
#code > #show-code-2:checked ~ select[data-selected="swgn2"] ~ select[data-selected="knitout"] ~ #code-2-swgn2-knitout,
#code > #show-code-2:checked ~ select[data-selected="kniterate"] ~ select[data-selected="js"] ~ #code-2-kniterate-js,
#code > #show-code-2:checked ~ select[data-selected="kniterate"] ~ select[data-selected="py"] ~ #code-2-kniterate-py,
#code > #show-code-2:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-js"] ~ #code-2-kniterate-plain-js,
#code > #show-code-2:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-py"] ~ #code-2-kniterate-plain-py,
#code > #show-code-2:checked ~ select[data-selected="kniterate"] ~ select[data-selected="knitout"] ~ #code-2-kniterate-knitout,
#code > #show-code-3:checked ~ select[data-selected="swgn2"] ~ select[data-selected="js"] ~ #code-3-swgn2-js,
#code > #show-code-3:checked ~ select[data-selected="swgn2"] ~ select[data-selected="py"] ~ #code-3-swgn2-py,
#code > #show-code-3:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-js"] ~ #code-3-swgn2-plain-js,
#code > #show-code-3:checked ~ select[data-selected="swgn2"] ~ select[data-selected="plain-py"] ~ #code-3-swgn2-plain-py,
#code > #show-code-3:checked ~ select[data-selected="swgn2"] ~ select[data-selected="knitout"] ~ #code-3-swgn2-knitout,
#code > #show-code-3:checked ~ select[data-selected="kniterate"] ~ select[data-selected="js"] ~ #code-3-kniterate-js,
#code > #show-code-3:checked ~ select[data-selected="kniterate"] ~ select[data-selected="py"] ~ #code-3-kniterate-py,
#code > #show-code-3:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-js"] ~ #code-3-kniterate-plain-js,
#code > #show-code-3:checked ~ select[data-selected="kniterate"] ~ select[data-selected="plain-py"] ~ #code-3-kniterate-plain-py,
#code > #show-code-3:checked ~ select[data-selected="kniterate"] ~ select[data-selected="knitout"] ~ #code-3-kniterate-knitout {
	display: block;
}


/* - - - - code sample download / edit links - - - - */
.code > .buttons {
	position:absolute;
	right:0;
	top:0;
	display:none;
}
.code:hover > .buttons {
	display:flex;
}
.code > .buttons > a {
	display:block;
	margin:2px;
	padding:2px;
	background:#f0f;
	border-radius:2px;
}


/* - - - - styling for home page - - - - */

.img-overlay-wrap-home {
	height: 100vh;
	display: flex;
	position: relative;
	width: 100vw;
}

.img-overlay-wrap-home > #knitwork-web {
	display: block;
	width: 100%;
	object-fit: contain;
	height: auto;
}

.img-overlay-wrap-home > #knitwork-title {
	position: absolute;
}

.img-overlay-wrap-home > #knitwork-title:hover {
	cursor: pointer;
}

.img-overlay-wrap-home > .needle,
.img-overlay-wrap > .nav-loops {
	position: absolute;
}

.needle:hover {
	cursor: pointer;
}

/* ---- for nav ---- */

.img-overlay-wrap {
	position: relative;
	width: 100vw;
	height: auto;
	display: inline-block;
}

.img-overlay-wrap > .nav-needle {
	display: block;
	object-fit: cover;
	height: 60vh;
	width: auto;
	padding-top: 4vh;
	margin-left: 8vw;
}

.img-overlay-wrap > .nav-loops {
	width: auto;
	top: 12.1vh;
	margin-left: 9.85vw;
}

.img-overlay-wrap > .loop-left {
	left: 41.2vh;
	margin-left: 9.35vw;
	height: 12.1vh; /*174.57px*/
}

.img-overlay-wrap > .loop-right {
	left: 45.5vh;
	margin-left: 9.35vw;
	height: 8.66vh; /*125.29px*/
}

.img-overlay-wrap > .loop-bottom-left {
	left: 41.1vh;
	height: 12.3vh; /*207.58px*/
}

.img-overlay-wrap > .loop-bottom-right {
	left: 43.5vh;
	height: 11.75vh; /*170.01px*/
}

.index {
	text-decoration: none;
	position: absolute;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 26px;
	color: #d6ff74;
	border: dotted;
	border-color: #3383ff;
	text-shadow: #3383ff;
	font-weight: 900;
	left: 46vh;
	cursor: pointer;
}

.index:hover {
	font-size: 30px;
	color: #3383ff;
	border-color: #d6ff74;
	text-decoration: underline;
}

#item1 {
	transform: rotate(-20deg);
	margin-top: -46.2vh;
}

#item2 {
	transform: rotate(5deg);
	margin-top: -40vh;
}

#item3 {
	transform: rotate(-14deg);
	margin-top: -34vh;
}

#item4 {
	transform: rotate(3deg);
	margin-top: -28.5vh;
}

#item5 {
	transform: rotate(-14deg);
	margin-top: -22.5vh;
}

#item6 {
	transform: rotate(2deg);
	margin-top: -17vh;
}

#item7 {
	transform: rotate(-12deg);
	margin-top: -10.2vh;
}

#item8 {
	transform: rotate(0deg);
	margin-top: -5vh;
}

#item9 {
	transform: rotate(-10deg);
	margin-top: -0.5vh;
}

#item10 {
	transform: rotate(0deg);
	margin-top: 5vh;
}

.item-odd {
	transform: rotate(-10deg);
	/* margin-top: 10vh; */
}

.item-even {
	transform: rotate(0deg);
	/* margin-top: 15vh; */
}

@media screen and (max-width: 600px) {
	.img-overlay-wrap > .nav-needle {
		margin-left: 0;
	}
	.img-overlay-wrap > .nav-loops {
		margin-left: 1.5vw;
	}
	/* .img-overlay-wrap > .loop-right {
		margin-left: 3vw;
	} */
	.index {
		font-size: 20px;
	}
	.index:hover {
		font-size: 24px;
	}
}

@media screen and (max-height: 600px) {
	.index {
		/* font-size: 16px; */
		font-size: 3.5vh;
		font-weight: 700;
	}
	.index:hover {
	font-size: 4vh;
	}
}

@media screen and (min-width: 800px) {
	.img-overlay-wrap-home {
		height: 100vh;
		display: flex;
	}
	.img-overlay-wrap > .nav-needle {
		margin-left: 24.2vw;
	}
	.img-overlay-wrap > .nav-loops {
		margin-left: 24.8vw;
	}
	/* .img-overlay-wrap > .loop-left {
		margin-left: 24.8vw;
	} */
	.img-overlay-wrap > .loop-right {
		left: 45.5vh;
		/* left: 44.2vh;
		margin-left: 25.6vw; */
		/* margin-left: 27.5vw; */
	}
	/* .img-overlay-wrap > .nav-needle,
	.img-overlay-wrap > .nav-loops {
		margin-left: 24vw;
	} */
	.index:hover {
		margin-left: 23vw;
	}
}

.arrow-list > h2::before {
	/* Unicode for >> character */
	content: "\00BB	";
}