@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Open+Sans:300,400,400i,700&display=swap&subset=latin-ext');

* {
	box-sizing: border-box;
}

img {
	display: block;
	max-width: 100%;
}

/* ==========================================================================
   Type
   ========================================================================== */

html {
	--ratio:				1.3;
	--size-xxxxlarge:		calc( var( --size-xxxlarge ) * var( --ratio ) );
	--size-xxxlarge:		calc( var( --size-xxlarge ) * var( --ratio ) );
	--size-xxlarge:			calc( var( --size-xlarge ) * var( --ratio ) );
	--size-xlarge:			calc( var( --size-large ) * var( --ratio ) );
	--size-large:			calc( 1rem * var( --ratio ) );
	--size-small:			calc( 1rem * .8 );
	
	--line-height: 			1.7rem;
	
	--color-blue-light:		#F0F5FD;
	--color-blue-lighter:	#f7faff;
	--color-blue-dark:		#4f6388;
	--color-orange:			lightsalmon;
	--color-orange-dark:	#ff7038;
	--color-orange-light:	#ffc2aa;
	--color-gray-bg:		#f9f9f9;
	
	--font-secondary:		'Libre Baskerville', serif;
	
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	line-height: 1.7;
}

@media ( min-width: 800px ) {
	html {
		font-size: 17px;
	}
}

@media ( min-width: 1200px ) {
	html {
		font-size: 18px;
	}
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-secondary);
	font-variant-ligatures: common-ligatures;
	line-height: 1.2;
}

h1 {
	font-size: var( --size-xxxlarge );
	margin-left: -.2rem;
}

h2 {
	font-size: var( --size-xxlarge );
	line-height:  calc( var(--line-height) * 1.5 );
	margin-bottom:  var(--line-height);
	margin-top: calc( var(--line-height) * 2 );
	padding-top: calc( var(--line-height) * 2 );
}

main h2:not(:first-of-type) {
	border-top: 1px solid #ccc;
}

main section {
	border-bottom: 1px solid #ccc;
	margin-bottom: calc( var(--line-height) * 2 );
	padding-bottom: calc( var(--line-height) * 2 );
}

main section:last-child {
	border: none;
}

h3 {
	font-size: var( --size-xlarge );
	line-height:  calc( var(--line-height) * 1.5 );
	margin-bottom:  calc( var(--line-height) / 2);
	margin-top: calc( var(--line-height) * 1.5 );
}

h2 + h3 {
	margin-top: calc( var(--line-height) * 2 );
}

h4 {
	font-size: var( --size-large );
	line-height:  var(--line-height);
	margin-bottom:  calc( var(--line-height) / 2);
	margin-top: calc( var(--line-height) * 1.5 );
}

h5 {
	font-size: 1rem;
	margin: calc( var(--line-height) / 2 ) 0;
}

p {
	margin: 0 0 calc( var(--line-height) / 2 );
}

ul{
	padding-left: 1.2rem;
}

ol ol {
	list-style-type: lower-latin;
	margin-top: calc( var(--line-height) / 2 );
}

nav li {
	margin-bottom: 1rem;
}

article li {
	margin-bottom: calc( var(--line-height) / 2 );
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 0 2.8rem;;
}

a {
	color: cornflowerblue;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	text-decoration: underline;
}

.callout {
	font-size: var( --size-large );
	line-height: 1.2;
}

.meta-text {
	font-size: .9rem;
}
 
.big-point {
	border-left: 5px solid var(--color-orange);
	color: var(--color-blue-dark);
	font-family: var(--font-secondary);
	font-size: var(--size-large);
	font-weight: 300;
	line-height: 1.5; 
	margin: calc( var(--line-height) * 2 ) 0;
	padding: 0 0 0 1.7rem;
}

.try-this {
	background-color: var(--color-gray-bg);
	border-left: 4px solid var(--color-orange);
	color: #264e87;
	padding: 1rem 1rem 1rem 2rem;
}

.try-this:before {
	content: 'Try this: ';
	font-weight: bold;
}

/* ==========================================================================
	Icons
	========================================================================== */

.icon {
	stroke: currentcolor;
	height: 2rem;
	width: 2rem;
}

/* ==========================================================================
	Figures
	========================================================================== */

figure {
	margin: 2.5rem 0;
}

figure > img {
	border: .25rem dashed var(--color-blue-light);
	padding: 1rem;
}
	
figcaption {
	font-size: var(--size-small);
	margin: 1rem;
}

@media( min-width: 56rem ) {
	
	figure {
		margin: 0;
	}
	
	figure > img {
		padding: 3rem 2rem;
	}

}


/* ==========================================================================
	Tables
	========================================================================== */

table {
	border-collapse: collapse;
	margin: 1rem auto 4rem;
}

article > table {
	grid-column: 1 / span 12;
}

th {
	border-bottom: 1px solid #ccc;
	font-family: var(--font-secondary);
	font-size: var(--size-large);
	font-weight: bold;
	text-align: left;
}

tr:nth-child(2n) {
	background-color: var(--color-blue-light);
}

td, th {
	padding: 1rem;
}

td {
	max-width:  28rem;
	vertical-align: baseline;
}

tr td:first-child {
	font-size: 1.1rem;
	font-weight: bold;
}

@media ( min-width: 500px ) {
	td, th {
		padding: 2rem;
	}
}

/* ==========================================================================
   Details & Summary / Challenge
   ========================================================================== */

details {
	box-shadow: 0 4px 7px rgba( 0, 0, 0, .3 );
	
}

details:not([open]):hover {
	background-color: var(--color-blue-light);
}

details > div {
	padding: 0 2rem 4rem;
}

@media (min-width: 58rem) {
	article > details {
		grid-column: 1 / span 10;
	}

	.challenge-content {
		margin: auto;
		max-width: 34rem;
	}
}

@media (min-width: 68rem) {
	article > details {
		grid-column: 2 / span 7;
	}
}

summary {
	font-family: var(--font-secondary);
	font-weight: bold;
	padding: 2rem;
}

summary:hover, summary:focus {
	color: var(--color-orange-dark);
	cursor: pointer;
	outline: none;
}

details[open] summary {
	padding-bottom: 1rem;
}

.challenge-meta {
	border: 1px solid #ccc;
	border-width: 1px 0;
	font-size: smaller;
	margin-bottom: var(--line-height);
	padding: 1rem 0 .5rem;
}

.challenge-meta a {
	display: inline-block;
}

.challenge-content > ol > li {
	margin-bottom: calc( var(--line-height) * 1.5 );
}

.challenge-content li::marker {
	font-weight: bold;
}

.challenge-content ul li::marker {
	font-weight: normal;
}

.selectable {
	background-color: #f5f2f0;
	color: black;
	font-weight: normal;
	padding: .1rem .25rem;
	user-select: all;
}

div.selectable {
	margin-top: .5rem;
	padding: 1rem;
}


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

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

main, .hero {
	margin: 4rem 2rem;
	max-width: 35rem;
	scroll-behavior: smooth;
}


	
article > .code-block.code-example-good, article > .code-block.code-example-bad {
	margin-top: calc( var(--line-height) * 1.5 );
}

@media ( min-width: 39rem ) {
	main, .hero {
		margin: 4rem auto;
	}
}

@media ( min-width: 58rem ) {
	
	main, .hero {
		margin: 0 2rem 4rem;
		max-width: 1400px;
	}
	
	article {
		display: grid;
		grid-gap: var(--line-height);
		grid-template-columns: repeat( 12, 1fr ) [full-end];	
	}
	
	article > * {
		grid-column: 2 / span 8;
		margin: 0;
	}
	
	article > h2 {
		margin-top: calc( var(--line-height) * 2 );
	}
	
	article > h3 {
		margin-top: calc( var(--line-height) * 1.5 );
	}
	
	article > figure {
		display: contents;
	}
	
	figure > *:not(figcaption) {
		grid-column: 1 / span 10;
		margin: calc( var(--line-height) * 2 ) 0 0;
	}
	
	figcaption {
		grid-column: span 8;
		margin: calc( var(--line-height) * -.5 ) calc( var(--line-height) / 2 ) calc( var(--line-height) * 2 );
	}
	
	article > code[class*=language-], article > pre[class*=language-], .code-block {
		grid-column: 1 / span 10;
		margin: 0 0 calc( var(--line-height) * 1.5 );
	}

	article > .code-block.code-example-good, article > .code-block.code-example-bad {
		margin-top: var(--line-height);
	}
	
	.big-point {
		grid-column: 1 / span 10;
	}
	
	.video-demo, .lesson-quiz-container, .cp_embed_wrapper, .pen-demo, .dominant-example {
		grid-column: 1 / span 12;
	}
	
	.try-this {
		grid-column: 1 / span 7;
	}
	
	.cp_embed_wrapper + .try-this, .pen-demo + .try-this {
		margin: calc( var(--line-height) * -3 ) 0  calc( var(--line-height) * 2 );
	}
	
	.dominant-example-section p, .dominant-example-section h2 {
		margin-left: auto;
		margin-right: auto;
		max-width: 35rem;
	}
	
}



@media ( min-width: 68rem ) {
	
	article > * {
		grid-column: 2 / span 6;
	}
	
	figure > *:not(figcaption) {
		grid-column: 1 / span 8;
		margin: calc( var(--line-height) * 2 ) 0;
	}
	
	figcaption {
		align-self: center;
		grid-column: span 2;
		margin: 0;
	}
	
	article > code[class*=language-], article > pre[class*=language-], .code-block {
		grid-column: 1 / span 8;
		margin: calc( var(--line-height) * 1.5 ) 0 calc( var(--line-height) * 2 );
	}
	
	article > .code-block.code-example-good, article > .code-block.code-example-bad {
		grid-column: 1 / span 6;
		margin-top: calc( var(--line-height) * 2 );
		padding: 3rem 2rem;
	}
	
	article > .code-block.code-example-bad {
		grid-column-start: 7;
	}
		
	.big-point {
		grid-column: 2 / span 7;
	}
	
}

@media ( min-width: 1430px ) {
	
	main, .hero {
		margin: 0 auto 6rem;
	}
	
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
	border-bottom: 1px solid #ccc;
	padding: 2rem;
}

.logo {
	align-items: center;
	border: none;
	display: inline-flex;
	font-family: var(--font-secondary);
	line-height: 0;
}

.logo:hover, .logo:focus {
	color: var(--color-orange);
}

.logo span {
	margin-top: .15rem;
}

.logo-icon {
	fill: var(--color-orange-light);
	height: 1.5rem;
	margin-right: 1rem;
	vertical-align: bottom;
	width: 1.5rem;
}
	

/* ==========================================================================
   Table of Contents
   ========================================================================== */

.toc-search {
	background-color: #f8f9fb;
	border-radius: .25rem;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 7%);
	margin: var(--line-height) 0 calc(var(--line-height) / 2);
	padding: var(--line-height) .5rem;
}

.toc-search input[type="search"] {
	margin-bottom: 0;
}

.toc-search > ul {
	margin: 0 3rem;
}

.table-of-contents ul ul {
	margin: 0 0 1.5rem;
	padding: 0;
}

.table-of-contents ul ul li {
	display: inline-block;
	font-size: .8rem;
	margin: 0;
}

.table-of-contents ul ul li:after {
	content: '|';
	color: #ccc;
	margin-right: .25rem;
}

.table-of-contents ul ul li:last-child:after {
	content: '';
	margin: 0;
}

.table-of-contents ul ul a {
	margin-right: .25rem;
}

footer .table-of-contents h4 {
	font-size: 1rem;
	line-height: var(--line-height);
	margin: calc( var(--line-height) / 2 ) 0 calc( var(--line-height) / 4 );
}

/* Index Page TOC */

body {
	counter-reset: my-awesome-counter;
}

.site-index .table-of-contents {
	max-width: 1100px;
	margin: auto;
}

.site-index .table-of-contents ul {
	list-style: none;
	padding: 0;
}

.site-index .table-of-contents section > ul > li {
	counter-increment: my-awesome-counter;
	margin-bottom: calc( var(--line-height) * 2 );
}

.site-index .table-of-contents section > ul > li:before {
	content: counter(my-awesome-counter, decimal-leading-zero);
	display: block;
	font-family: var(--font-secondary);
	font-size: var(--size-xxlarge);
	line-height: calc( var(--line-height) * 1.5 );
	margin-right: .5rem;
}

.site-index .table-of-contents ul ul {
	display: none;
}


@media ( min-width: 58rem ) {

	.site-index .table-of-contents section {
		display: grid;
		grid-gap: calc( var(--line-height) * 2 );
		grid-template-columns: repeat(12, 1fr);
	}
	
	.site-index .table-of-contents h3 {
		grid-column: span 12;
	}
	
	.site-index .table-of-contents section > ul {
		display: contents;
	}
	
	.site-index .table-of-contents section > ul > li {
		grid-column: span 4;
		list-style: none;
		margin-bottom: 0;
	}
	
}

/* ==========================================================================
   Article Header & Hero
   ========================================================================== */

article header, .hero {
	border-bottom: 1px solid #ccc;
	padding-bottom: calc( var(--line-height) * 2 );
}

@media ( min-width: 58rem ) {
	
	article header, .hero {
		align-content: center;
		display: grid;
		grid-column: 1 / span 12;
		grid-gap: var(--line-height);
		grid-template-columns: repeat( 12, 1fr );
		min-height: 80vh;
	}
	
	.hero {
		min-height: 98vh;
	}

	.hero .byline {
		margin-top: -1.5rem;
	}
	
	article header h1, .hero h1 {
		font-size: var(--size-xxxxlarge);
		grid-column: 1 / span 8;
		margin: 0;
	}
	
	article header p, .hero p {
		font-size: var(--size-large);
		font-weight: 100;
		grid-column: 1 / span 7;
		line-height: calc( var(--line-height) * 1.25 );
		margin: 0;
	}
	
	.page-nav {
		align-self: start;
		border-left: 1px solid #ccc;
		grid-column: 8 / span 3;
		grid-row: 2 / span 2;
		padding-left: var(--line-height);
	}
	
}

@media ( min-width: 78rem ) {
	
	article header h1, .hero h1 {
		grid-column: 2 / span 7;
	}
	
	article header p, .hero p {
		grid-column: 2 / span 6;
	}
	
}

/* ==========================================================================
   Article Nav & Chapter Nav
   ========================================================================== */

.page-nav-listing {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.page-nav-listing li {
	margin: 0;
}

@media( min-width:58rem ) {

	.long-list {
		break-inside: avoid;
		column-count: 2;
		column-gap: .5rem;
	}

}

.page-nav h2 {
	font-size: var( --size-large );
	line-height:  var(--line-height);
	margin-bottom:  calc( var(--line-height) / 3);
	margin-top: 0;
	padding: 0;
}

.page-nav a {
	background-color: #f8f9fb;
	border-radius: .25rem;
	display: block;
	line-height: 1.3;
	margin-bottom: .5rem;
	padding: .2rem .5rem;
}

.home-page .page-nav a {
	background-color: transparent;
	margin-bottom: 0;
}

.page-nav a:hover {
	background-color: #eaf1ff;
	text-decoration: none;
}

.chapter-nav {
	border: 1px solid #ccc;
	border-width: 1px 0;
	grid-column: 1 / span 12;
	margin-top: var(--size-xxxlarge);
	padding-inline: .5rem;
}

@media ( min-width: 1000px ) {

	.chapter-nav {
		grid-column: 2 / span 10;
	}

}

.chapter-nav ol {
	list-style: none;
	padding-left: 0;
}

@media ( min-width: 550px ) {

	.chapter-nav ol {
		background-image: linear-gradient(-90deg, transparent 0%, transparent 50%, #ccc 50%, #ccc calc( 50% + 1px ), transparent calc( 50% + 1px ), transparent 100%);
		display: flex;
		gap: 1rem;
		justify-content: space-between;
	}


	.chapter-nav li {
		display: grid;
		grid-column-gap: 1rem;
		margin-bottom: 0;
	}

	.next-chapter {
		margin-left: auto;
	}

	.next-chapter div, .next-chapter a {
		grid-column: 1;
		grid-template-columns: 1fr min-content;
	}

	.prev-chapter div, .prev-chapter a {
		grid-column: 2;
		grid-template-columns: min-content 1fr;
	}

}

@media( min-width: 925px ) {

	.prev-chapter::before {
		content: '←';
		color: #ddd;
		font-size: 400%;
		grid-column: 1;
		grid-row: 1 / 3;
		line-height: .6;
	}

	.next-chapter::after {
		content: '→';
		color: #ddd;
		font-size: 400%;
		grid-column: 2;
		grid-row: 1 / 3;
		line-height: .6;
	}

}


/* ==========================================================================
   Search Page
   ========================================================================== */

   .search-main {
	   margin-top: var(--size-xxxxlarge);
	   min-height: 90vh;
	   max-width: 35rem;
   }

   .search-group {
	   display: flex;
	   gap: .5rem;
   }

   label[for="search"] {
		clip: rect(0 0 0 0); 
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap; 
		width: 1px;
   }

   input[type="search"] {
	   flex-grow: 1;
	   font-size: 1rem;
	   margin-bottom: var(--size-xxlarge);
	   padding: .5rem;
   }

   .search-main ul {
	   padding-left: calc( 40px + .5rem );
   }

   .search-main li, .toc-search li {
	   margin-bottom: var(--size-xxxlarge);
   }

   .toc-search li:first-child {
	   margin-top: var(--size-xxxlarge);
   }

   .search-main h3, .toc-search h3 {
		font-size: 1.15rem;
		line-height: var(--line-height);
		margin: calc( var(--line-height) / 2 ) 0 0;
   }

   .search-main li div, .toc-search li div {
	   margin-block: .2rem;
   }

   .search-main :not(h3) > a, .toc-search :not(h3) > a {
		display: inline-block;
		font-size: .9rem;
		margin-right: .25rem;
	}

	.search-main :not(h3) > a:after, .toc-search :not(h3) > a:after {
		content: '|';
		color: #ccc;
		margin-left: .3rem;
		margin-right: .25rem;
	}

	.search-main :not(h3) > a:hover:after, .toc-search :not(h3) > a:hover:after {
		border-bottom: none;
		text-decoration: none;
	}

	.search-main :not(h3) > a:last-child:after, .toc-search :not(h3) > a:last-child:after {
		content: '';
		margin: 0;
	}


/* ==========================================================================
   Reference Index
   ========================================================================== */

.index-section {
	border: none;
	grid-column: 2 / span 5;
	margin: 0;
	padding: 0;
}

.index-section:nth-of-type(3) {
	grid-column: 8 / span 5;
	grid-row: 2 / span 2;
}

.index-section h2 {
	padding: 0;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.licence {
    color: #333;
    font-size: var(--size-small);
    margin: 2rem auto 0;
    padding: 2rem 0;
    max-width: 1100px;
}

.site-footer nav {
	background-color: var(--color-blue-light);
	border-top: 1px solid #ccc;
	font-size: .8rem;
	margin-top: 8rem;
	padding: 2rem;
}

.site-footer nav, .site-footer h2 {
	margin: 2rem auto;
	max-width: 35rem;
}

.menu-toggle {
	background-color: transparent;
	border: none;
	color: cornflowerblue;
	cursor: pointer;
	display: none;
}

.menu-toggle:focus {
	outline: none;
}

.menu-toggle:focus .icon, .menu-toggle:hover .icon, .footer-search-link:focus .icon, .footer-search-link:hover .icon {
	stroke: black;
}

.icon-x, .icon-burger {
	transition: all .4s ease-out;
}

.icon-x {
	opacity: 0;
}

.menu-toggle {
	transition: all .4s;
}

.isOpen .menu-toggle {
	transform: rotate(180deg);
}

.isOpen .icon-burger {
	opacity: 0;
}

.isOpen .icon-burger line {
	transition: all .5s;
}

.isOpen .icon-burger line:first-child {
	transform: translatey(.3rem);
}

.isOpen .icon-burger line:last-child {
	transform: translatey(-.3rem);
}

.isOpen .icon-x {
	opacity: 1;
}

.footer-search-link {
	display: block;
	right: 2rem;
	position: absolute;
	top: 1.7rem;
	z-index: 2;
}

.footer-search-link span {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

@media ( min-width: 39rem ) {
	
	.menu-toggle {
		display: block;
		right: 1rem;
		position: absolute;
		top: 1.8rem;
		z-index: 2;
	}

	.footer-search-link {
		right: 4.5rem;
		top: 1.9rem;
	}

	.site-footer {
		margin-top: 0;
	}
	
	.site-footer nav {
		background-color: transparent;
		border: none;
		font-size: .9rem;
		height: 100vh;
		right: 0;
		margin-top: 0;
		overflow-x: visible;
		overflow-y: scroll;
		padding: 3rem 5rem;
		position: fixed;
		top: 0;
		transform: translatex( 36rem );
		width: 36rem;
	}
	
	.isOpen.site-footer nav {
		animation: slide-in .4s ease-out;
		background-color: var(--color-blue-light);
		box-shadow: 0 5px 10px rgba( 0, 0, 0, .5 );
		transform: translatex( 0 );
	}
	
	.isOpen.site-footer:before {
		content: '';
		background-color: rgba( 0, 0, 0, .3 );
		bottom: 0;
		display: block;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
	}
	
	.site-footer h2 {
		margin: 4rem 0 0;
		padding-top: 0;
	}
	
}

@keyframes slide-in {

	0% {
		background-color: transparent;
		box-shadow: 0 5px 10px rgba( 0, 0, 0, 0 );
		transform: translatex( 30rem );
	}
	
	100% {
		background-color: var(--color-blue-light);
		box-shadow: 0 5px 10px rgba( 0, 0, 0, .5 );
		transform: translatex( 0 );
	}

}

/* ==========================================================================
	Pen Demo
   ==========================================================================*/

.pen-demo {
	background-color: #e6efff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	display: flex;
}

.pen-code-tabs {
	width: 100%;
}

.pen-live-code-area {
	position: relative;
	width: 50%;
}

.pen-tab-select {
	margin: 0;
	padding: 0;
}

.pen-tab-select li {
	display: inline-block;
	margin: 0;
}

.pen-tab-select li a {
	background-color: #cfe1ff;
	border: none;
	color: var(--color-blue-dark);
	display: inline-block;
	font-size: .9rem;
	padding: .5rem 1rem;
	text-decoration: none;
}

.pen-tab-select li a:hover, .pen-tab-select li a:focus {
	background-color: var(--color-blue-medium);
	color: white;
	outline: none;
}

.pen-tab-select li a.active-tab {
	background-color: cornflowerblue;
	color: white;
}

.pen-reset-button {
	background-color: white;
	border: none;
	border-radius: 0;
	color: var(--color-blue-dark);
	cursor: pointer;
	font-size: .8rem;
	line-height: 1.5;
	padding: .45rem .65rem;
	position: absolute;
	right: .35rem;
	top: .2rem;
}

.pen-reset-button:hover, .pen-reset-button:focus {
	background-color: var(--color-blue-medium);
	color: white;
	outline: none;
}

.pen-reset-button:active {
	background-color: cornflowerblue;
	color: white;
}

.pen-work-area-label {
	background-color: cornflowerblue;
	color: white;
	display: inline-block;
	font-family: var(--font-primary);
	font-size: .9rem;
	font-weight: normal;
	line-height: 1.7;
	margin: 0;
	padding: .5rem 1rem;
}

.pen-demo .CodeMirror{
	border: 1px solid #cad7ec;
	border-top-color: cornflowerblue;
	box-sizing: border-box;
	height: 50vh;
	min-height: 30rem;
	padding: 1rem 0 0 1rem;
	width: 100%;
}

.pen-rendering-area {
	line-height: 0;
	width: 50%;
}

.pen-rendering {
	background-color: white;
	border: 1px solid #cad7ec;
	border-top-color: cornflowerblue;
	border-left-width: 0;
	box-sizing: border-box;
	height: 50vh;
	min-height: 30rem;
	overflow-y: auto;
	resize: horizontal;
	width: 100%;
}


/* ==========================================================================
   Code Examples
   ========================================================================== */

p > code,
li > code,
dd > code,
td > code,
small > code,
strong > code {
	background-color: #f5f2f0;
	color: #905;
	display: inline-block;
	font-weight: normal;
	margin: 0 .2rem;
	padding: 0 .25rem;
}

small > code {
	margin: 0 .1rem;
	padding: 0 .125rem;
}

figcaption > code {
	background-color: #f5f2f0;
	color: #905;
	padding: .2rem;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
	background-color: var(--color-gray-bg);
}

code[class*=language-],
pre[class*=language-] {
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

pre[class*=language-]{
	margin: 3rem 0 3rem;
	overflow: visible;
}

.code-block {
	background-color: #f8f9fb;
	padding: 4rem 2rem 3rem;
}

.code-block .CodeMirror {
	background-color: transparent;
	height: auto;
}

.code-block .cm-s-default .cm-comment, .pen-demo .cm-s-default .cm-comment {
	color: #888;
}

.code-block .cm-s-default .cm-qualifier, .pen-demo .cm-s-default .cm-qualifier {
	color: #0066be;
}

pre > code {
	white-space: pre-wrap;
}

pre.language-markup, pre.language-css, .code-block.htmlmixed, .code-block.css {
	padding-top: 4rem;
	position: relative;
}

pre.language-markup:before, pre.language-css:before, .code-block.htmlmixed:before, .code-block.css:before {
	content: 'HTML';
	background-color: var(--color-orange);
	color: white;
	display: block; 
	left: 0;
	padding: .25rem .5rem;
	position: absolute;
	right: 0;
	top: 0;
}

pre.language-css:before, .code-block.css:before {
	content: 'CSS';
	background-color: #7599db;
}

.code-block.code-example-good {
	border-top: calc( var(--line-height) / 8 ) solid rgb(102, 153, 0);
}

.code-block.code-example-bad {
	border-top: calc( var(--line-height) / 8 ) solid indianred;
}

.code-block.code-example-good:before, .code-block.code-example-bad:before {
	content: 'Good';
	background-color: transparent;
	color: rgb(102, 153, 0);
	font-size: var(--size-large);
	font-weight: bold;
	top: calc( var(--line-height) * -1.5 );
}

.code-block.code-example-bad:before {
	content: 'Bad';
	color: indianred;
}

.cp_embed_wrapper {
	background: #eaf1fd;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	height: 400px;
	overflow: hidden;
	padding-bottom: 10px;
	resize: both;
}

.pen-demo {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cp_embed_wrapper iframe {
  height: 100% !important;
}

@media ( min-width: 39rem ) {
	
	pre[class*=language-] {
		margin: 3rem 0;
		padding: 3.5rem 1.5rem 1.5rem;
	}
	
	.cp_embed_wrapper, .pen-demo {
		margin: 3rem 0;
	}
	
	.dominant-example .cp_embed_wrapper {
		margin: 3rem 0;
	}
	
}

@media ( min-width: 50rem ) {
	
	pre[class*=language-] {
		padding: 4rem 2rem 3rem;
	}
	
	.cp_embed_wrapper {
		height: 450px;
		margin: var(--line-height) 0 calc( var(--line-height) * 3 );
	}

	.pen-demo {
		margin: var(--line-height) 0 calc( var(--line-height) * 3 );
	}
	
	.dominant-example.cp_embed_wrapper {
		margin: 3rem 0 5rem;
	}
	
}

@media ( min-width: 70rem ) {
	
	.cp_embed_wrapper {
		height: 500px;
	}
	
}

@media ( min-width: 80rem ) {
	
	.cp_embed_wrapper {
		height: 550px;
	}
	
}

.video-demo {
	margin-top: 2rem;
	overflow: hidden;
	padding-top: 85vh;
	position: relative;
}

.video-demo iframe {
	border: none;
	height: 80%;
	left: 0;
	min-height: 80vh;
	position: absolute;
	top: 0;
	width: 100%;
}

.lesson-quiz iframe {
	border: none;
	box-shadow:
		0 1.1px 0.7px -2px rgba(0, 0, 0, 0.024),
		0 3px 1.9px -2px rgba(0, 0, 0, 0.035),
		0 7.2px 4.5px -2px rgba(0, 0, 0, 0.046),
		0 24px 15px -2px rgba(0, 0, 0, 0.07);
	height: 100%;
	min-height: 80vh;
	width: 100%;
}

@media ( max-height: 900px ) {

	.lesson-quiz iframe {
		min-height: 55rem;
	}
	
}

.quiz-link-wrapper {
	text-align: right;
}

.quiz-link {
	align-items: center;
	display: inline-flex;
	gap: .4rem;
	justify-content: flex-end;
	margin: calc(var(--line-height) / 2) 0 calc(var(--line-height) / 2);
}

/* ==========================================================================
   Checklist
   ========================================================================== */

form > div {
	align-items: baseline;
	display: flex;
	padding: calc( var(--line-height) / 4 ) 0;
}

input[type=checkbox]{
	margin-right: calc( var(--line-height) / 3 );
	transform: scale(1.2);
}

input:checked + label {
	color: gray;
	text-decoration: line-through;
}