/* Styles for ALL lectures */

@import url(../base.css);
@import url(components.css);
@import url(prism.css);

@font-face {
	font-family: 'Reenie Beanie';
	font-style: normal;
	font-weight: 400;
	src: local('Reenie Beanie'), local('ReenieBeanie'), url(https://fonts.gstatic.com/s/reeniebeanie/v8/z7NSdR76eDkaJKZJFkkjuvWxXPq1q6Gjb_0.woff2) format('woff2');
}

@font-face {
	font-family: 'BLOKK';
	src: local("Blokk") url('fonts/BLOKKRegular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

:nth-child(1) {--index: 0}
:nth-child(2) {--index: 1}
:nth-child(3) {--index: 2}
:nth-child(4) {--index: 3}
:nth-child(5) {--index: 4}
:nth-child(6) {--index: 5}
:nth-child(7) {--index: 6}
:nth-child(8) {--index: 7}
:nth-child(9) {--index: 8}
:nth-child(10) {--index: 9}
:nth-child(11) {--index: 10}
:nth-child(12) {--index: 11}
:nth-child(13) {--index: 12}
:nth-child(14) {--index: 13}
:nth-child(15) {--index: 14}
:nth-child(16) {--index: 15}

:root {
	--rainbow-scroll: scroll 20s linear 2;
	--accent1: var(--c1);
	--accent2: var(--c2);
	--accent3: var(--c3);
	--accent4: var(--c4);
	--accent1-light: var(--c1-light);
	--accent2-light: var(--c2-light);
	--accent3-light: var(--c3-light);
	--accent4-light: var(--c4-light);

	--font-mono: Consolas, Monaco, 'Andale Mono', monospace;
	--font-body: 'Helvetica Neue', Segoe UI, sans-serif;
	--font-heading: var(--font-body);
	--font-handwritten: 'Reenie Beanie', Marker Felt, cursive;


	/* Bright colors */
	--color-magenta: #f06;
	--color-orange: orange;
	--color-green: yellowgreen;
	--color-aqua: hsl(191, 100%, 40%);
	--color-yellow: gold;
}

img {
	object-fit: contain;
}

svg {
	overflow: visible;
}

pre + pre {
	margin-top: .5em;
}

#intro {
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
}

#intro::after {
		content: "Follow along at designftw.mit.edu/go/slides";
	}

.lab #intro::after {
			content: "Follow along at designftw.mit.edu/go/lab";
	}

#intro h1 {
		max-width: 7em;
		margin: 0;
		padding-bottom: .2em;
		text-align: left;
		font-size: calc(350% + 2vw + 2vh);
		line-height: .83;
		letter-spacing: -.04em;
		font-weight: bold;
		filter: drop-shadow(.01em .01em .03em black);
	}

#intro h1 .pretitle {
			display: block;
			padding: .3em .3em;
			margin-bottom: .3em;
			width: fit-content;
			background: var(--rainbow);
			animation: var(--rainbow-scroll);
			font-size: 30%;
			color: black;
			text-transform: uppercase;
			letter-spacing: -.02em;
		}

#intro h1 .pretitle::before {
				content: "6.4500 ";
			}

@supports (-webkit-background-clip: text) {
	#intro h1 {
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

		#intro h1 .note {
			margin-top: .1em;
			color: white;
		}
}

.note,
h2.note.note {
	font-family: var(--font-handwritten);
	color: var(--accent3-light);
	font-weight: normal;
}

section > header.slide {
	background: var(--rainbow);
	animation: var(--rainbow-scroll);
}

.slide {
	padding: 2.5rem;
	background-color: black;
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
	color: white;
	text-decoration-color: hsla(0,0%,100%,.2);
}

.image.slide > h1:only-child,
.slide > .caption,
.slide > h1,
.slide > header > h1 {
	font-weight: 300;
}

.slide > .caption {
	padding: .5em;
	backdrop-filter: blur(9px);
}

.slide > .caption > h1:not(:last-child) {
		margin-top: 0;
	}

:is(.slide > .caption) h1 + h2,
	:is(.slide > .caption) h1 + p {
		margin: 0;
		font-size: 50%;
		font-weight: bold;
		letter-spacing: -.02em;
		color: inherit;
	}

h1 code,
h2 code {
	line-height: inherit;
}

.slide h2 {
	color: white;
	font-size: 130%;
	letter-spacing: -.02em;
}

.fancy-heading,
.side-by-side > * > h2:first-child,
.heading-2x1 > * > h2:first-child,
.slide.fancy-headings h2 {
	padding: .1em .3em;
	border-radius: .2em;
	background: var(--rainbow);
	animation: var(--rainbow-scroll);
	color: white;
}

.side-by-side > * > h2:first-child,
.heading-2x1 > * > h2:first-child {
	margin-top: 0;
}

.slide img {
	max-height: calc(100vh - 5rem);
}

.syntax-breakdown.syntax-breakdown {
	--color1: var(--accent4);
}

.syntax-breakdown.syntax-breakdown span[title] span[title] {
		--color1: var(--accent3);
		--length: 3em;
	}

.slide button {
	color: black;
}

.button {
	padding: 0 .4em;
	border: 1px solid hsla(30,0%,100%, .3);
	border-radius: .3em;
	cursor: pointer;
	white-space: nowrap;
	font-weight: bold;
	letter-spacing: -.03em;
	font-size: 60%;
}

	.button:hover {
		text-decoration: none;
		background: hsla(0,0%,100%,.1);
	}

.demo.slide:not(.minimal) {
	background: white;
	color: black;
	--padding: 0;
}

.demo-controls {
	color: black;
}

blockquote {
	--accent1: var(--accent1-light);
}

fieldset {
	border: 1px solid hsla(0,0%,100%,.2);
	margin: .5em;
}

legend {
	font-weight: bold;
}

a:empty::after {
	content: attr(href);
}

[data-type].slide::after,
.slide .ribbon {
	background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)), var(--rainbow);
	animation: var(--rainbow-scroll);
}

.ribbon-container {
	position: fixed;
	top: 0;
	right: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.ribbon-container > .ribbon {
		position: relative;
		display: block;
		white-space: pre-line;
	}

.hos.slide .ribbon::first-line,
.hof.slide .ribbon {
	font-size: 70%;
}

.hos.slide .ribbon {
	line-height: 1.2;
	font-size: 50%;
}

section section header.slide {
	background: none;
}

.delayed.displayed,
.delayed-children > .displayed {
	opacity: 1;
}

.delayed.bounce {
	transition-timing-function: cubic-bezier(.2,.6,.6,1.5);
}

.delayed.bounce:not(.displayed):not(.current) {
		transform: scale(0);
	}

.delayed.slide-in,
.slide-in .delayed {
	display: inline-flex;
	white-space: pre;
	overflow: hidden;
	max-width: 100vw;
	opacity: 1;
	transition-property: max-width;
}

.delayed.slide-in:not(.displayed):not(.current), .slide-in .delayed:not(.displayed):not(.current) {
		max-width: 0;
	}

.media-frame.media-frame.media-frame > :first-child,
.browser.browser.browser > :first-child {
	max-height: calc(100vh - 7vw);
}

.white.slide {
	background: white;
	color: black;
}

.light.slide {
	background: hsl(var(--c3-hs), 85%);
}

.slide:where(:not(.light):not(.white):not(.demo)) input:not([type]),
    .slide:where(:not(.light):not(.white):not(.demo)) input[type="text"],
    .slide:where(:not(.light):not(.white):not(.demo)) input[type="email"],
    .slide:where(:not(.light):not(.white):not(.demo)) input[type="tel"],
    .slide:where(:not(.light):not(.white):not(.demo)) input[type="url"],
    .slide:where(:not(.light):not(.white):not(.demo)) textarea:where(:not([class])) {
    	background: rgba(0,0,0,.5) padding-box;
    	padding: 0 .3em;
    	box-sizing: border-box;
    	border: .05em solid hsla(0, 0%, 100%, .2);
    	font-weight: bold;
    }

:is(.slide:where(:not(.light):not(.white):not(.demo)) input:not([type]),.slide:where(:not(.light):not(.white):not(.demo)) input[type="text"],.slide:where(:not(.light):not(.white):not(.demo)) input[type="email"],.slide:where(:not(.light):not(.white):not(.demo)) input[type="tel"],.slide:where(:not(.light):not(.white):not(.demo)) input[type="url"],.slide:where(:not(.light):not(.white):not(.demo)) textarea:where(:not([class])))::selection {
			background: var(--accent3);
		}

.flipped-emoji {
	display: inline-block;
	transform: scaleX(-1);
}

.additive-steps .slide .step1,
	.additive-steps .slide .step2,
	.additive-steps .slide .step3,
	.additive-steps .slide .step4 {
		opacity: 0;
		pointer-events: none;
	}

/* A task for another day: rewrite this to be more elegant */

.additive-steps .slide[data-step~="1"] .step1,
	.additive-steps .slide[data-step~="2"] .step2,
	.additive-steps .slide[data-step~="3"] .step3,
	.additive-steps .slide[data-step~="4"] .step4 {
		opacity: 1;
		pointer-events: auto;
	}

.additive-steps .slide[data-step~="1"] .hide-on-step1,
	.additive-steps .slide[data-step~="2"] .hide-on-step2,
	.additive-steps .slide[data-step~="3"] .hide-on-step3,
	.additive-steps .slide[data-step~="4"] .hide-on-step4 {
		display: none;
	}

.slide.with-preview .media-frame,
	.slide.with-preview .browser {
		overflow: hidden;
		width: var(--frame-width, 100%);
		--height: calc(var(--frame-height, 100vh - 12em));
		height: var(--height, 100%);
	}

.slide.with-preview .media-frame iframe, .slide.with-preview .browser iframe {
			background: white;
			transform: scale(var(--preview-zoom, 1));
			transform-origin: top left;
			width: calc(var(--frame-width, 100%) / var(--preview-zoom, 1));
			height: calc(var(--height, 100%) / var(--preview-zoom, 1));
		}

.iframe.iframe.slide > h1 {
	font-weight: 300;
	background-color: rgba(0,0,0,.3);
}

@keyframes arrow {
	to {transform: translateX(.3em) }
}

.press-right-arrow kbd {
		animation: arrow .3s 10 alternate;
	}

[data-profile="student"] .student-hide {
	display: none;
}

#thankyou {
	background: url(img/thankyou.gif) no-repeat,
	            url(img/unicorn.gif) 100% 80% no-repeat hsl(344, 88%, 73%);
	background-blend-mode: multiply, normal;
}

#thankyou h1 {
		font-size: 100%;
		font-weight: bold;
		max-width: 20em;
	}

#thankyou h1::first-line {
			font-size: 87%;
		}

.video.slide {
	padding: 0;
	background: black;
}

.video.slide video {
		width: 100%;
		height: 100%;
	}

h1 .label {
	display: block;
	width: fit-content;
	padding: .2em .5em;
	margin: 0 auto .2em;
	background: var(--rainbow);
	animation: var(--rainbow-scroll);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 60%;
}

/* Death by Powerpoint slide */
.dbpp.slide h1 {
		font-size: 300%;
		margin: 0 0 .2em;
	}
.dbpp.slide ul,
	.dbpp.slide ol,
	.dbpp.slide > p {
		max-width: 75vw;
	}
.dbpp.slide ol > li::marker {
		color: var(--accent3-light);
		font-weight: bold;
	}
.dbpp.slide > p {
		font-size: 150%;
	}

#history iframe,
.history.slide iframe,
iframe[style*="--zoom"] {
	width: calc(100% / var(--zoom, 1));
	height: calc(100% / var(--zoom, 1));
	transform: scale(var(--zoom));
	transform-origin: 0 0;
}

#history .slide:not(header),
.history.slide {
	background: var(--image, black) center / cover;
	--color: white;
}

:is(#history .slide:not(header),.history.slide) iframe {
		position: absolute;
		top: 0; left: 0;
		z-index: -1;
		border: 0;
		background: white;
		pointer-events: none;
		overflow: hidden;
	}

:is(#history .slide:not(header),.history.slide) h1 {
		position: relative;
		padding: .5em;
		padding-right: .2em;
		border: .2em solid var(--color);
		font-weight: bold;
		font-size: 130%;
		letter-spacing: -.02em;
		text-align: left;
		background: hsla(0,0%,0%,.1);
		backdrop-filter: blur(9px);
	}

:is(#history .slide:not(header),.history.slide) h1 .delayed {
			color: var(--accent1-light);
		}

:is(:is(#history .slide:not(header),.history.slide) h1 .delayed) ~ .delayed {
				color: var(--accent2-light);
			}

:is(#history .slide:not(header),.history.slide) time {
		float: left;
		position: relative;
		top: -.5em;
		left: -.5em;
		padding: .2em .4em .2em;
		font-size: 130%;
		line-height: 1;
		font-weight: bold;
		background: var(--color);
		color: black;
		mix-blend-mode: screen;
		margin-bottom: -.5em;
	}

.light:is(#history .slide:not(header),.history.slide) {
		--color: black;
		color: var(--color);
	}

.light:is(#history .slide:not(header),.history.slide) time {
			font-size: 130%;
			color: white;
			mix-blend-mode: multiply;
		}

.light:is(#history .slide:not(header),.history.slide) h1 {
			background: hsla(0,0%,100%,.2);
			backdrop-filter: blur(9px);
		}

.light:is(#history .slide:not(header),.history.slide) h1 .delayed {
				color: var(--accent1);
			}

:is(.light:is(#history .slide:not(header),.history.slide) h1 .delayed) ~ .delayed {
					color: var(--accent2);
				}

.selector-matches section > code,
.codehl code,
code.codehl {
	display: inline-block;
	background: black;
	white-space: nowrap;
	padding: .2em .3em .1em;
	border-radius: .2em;
	line-height: 1;
}

.white.slide :is(.selector-matches section > code,.codehl code,code.codehl) {
		background: var(--accent1-light);
}

.code-snippets pre {
		background: hsl(0 0% 100% / .1);
		padding: .5em;
		border-radius: .2em;
	}

/*

	list-style: none;

	& li {
		margin: .5em 0;
	}

	*/

.runnable.slide .new-tab {
		margin-top: .5em;
	}

ul.do,
li.do {
	list-style: '✅ ';
}


ul.dont,
li.dont {
	list-style: '🚫 ';
}

ul.warn,
li.warn {
	list-style: '⚠️ ';
}

.thumbs-down {
	list-style: '👎🏼 '
}

.thumbs-up {
	list-style: '👍🏼 '
}

header.slide h1[data-group]::before {
		content: attr(data-group);
		white-space: nowrap;
		display: block;
		width: min-content;
		padding: .3em .5em;
		border: .1em solid black;
		border-radius: .15em;
		margin: -1.5em auto .5em;
		font-size: 50%;
		font-weight: bold;
		text-transform: uppercase;
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
	}