:root {
	--transpar: rgba(0, 0, 0, 0);

	--lighter-yellow: rgb(255, 236, 211);
	--yellow: rgb(255, 179, 80);
	--darker-yellow: rgb(77, 54, 24);

	--lightest-coral: rgb(255, 245, 241);
	--lighter-coral: rgb(255, 223, 211);
	--coral: rgb(255, 127, 80);
	--darker-coral: rgb(64, 32, 20);
	--darkest-coral: rgb(36, 16, 10);

	--lighter-raspberry: rgb(248, 209, 221);
	--raspberry: rgb(226, 71, 121);
	--darker-raspberry: rgb(57, 18, 30);

	--lightest-byui-blue: rgb(235, 244, 249);
	--byui-blue: rgb(0, 118, 182);
	--darkest-byui-blue: rgb(0, 24, 36);

	--light-bk-color: rgb(255, 255, 255);
	--light-fg-color: rgb(4, 4, 4);

	--dark-bk-color: rgb(0, 0, 0);
	--dark-fg-color: rgb(184, 184, 184);

	--border-color: rgb(112, 112, 112);
}
@media screen {
	:root {
		--bk-color: var(--light-bk-color);
		--fg-color: var(--light-fg-color);

		--heading-fg-color: var(--byui-blue);
		--bullet-fg-color: var(--byui-blue);

		--dfn-fg-color: var(--coral);
		--strong-fg-color: var(--coral);

		--line-number-hilite: var(--byui-blue);
		--python-bk-color: var(--lightest-coral);
		--console-bk-color: var(--lightest-byui-blue);

		--link-before-fg-color: var(--byui-blue);
		--link-hover-fg-color: var(--coral);
		--link-active-fg-color: red;
		--link-visited-fg-color: purple;

		--body-font-size: 110%;
		--formula-font-size: 118%;
		--article-line-height: 1.4;
	}
}
@media screen and (max-width: 600px) {
	/* Small screens */
	:root {
		--header-padding-side: 0.75em;
		--header-separation: 0.75em;
		--article-padding-side: 0.75em;
	}
}
@media screen and (min-width: 600px) {
	/* Medium and large screens */
	:root {
		--header-padding-side: 1em;
		--header-separation: 1em;
		--article-padding-side: 1em;
	}
}
@media print {
	:root {
		--bk-color: white;
		--fg-color: black;

		--heading-fg-color: black;
		--bullet-fg-color: darkgray;

		--dfn-fg-color: black;
		--strong-fg-color: black;

		--python-bk-color: white;
		--console-bk-color: white;

		--link-before-fg-color: var(--byui-blue);
		--link-hover-fg-color: var(--byui-blue);
		--link-active-fg-color: var(--byui-blue);
		--link-visited-fg-color: var(--byui-blue);

		--body-font-size: 110%;
		--formula-font-size: 105%;

		--article-padding-side: 0;
		--article-line-height: 1.15;
	}
}

body {
	background-color: var(--bk-color);
	color: var(--fg-color);
	font-size: var(--body-font-size);
}
@media screen {
	body {
		font-family: "Open Sans", Arial, Helvetica, Verdana, sans-serif;
	}
	body.dark {
		--bk-color: var(--dark-bk-color);
		--fg-color: var(--dark-fg-color);

		--python-bk-color: var(--darkest-coral);
		--console-bk-color: var(--darkest-byui-blue);
	}
}
@media print {
	body {
		font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
		max-width: 6.5in;
	}
}


@media screen {
	header {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 0.5em var(--header-padding-side);
		background-color: var(--byui-blue);
		color: white;
	}
	header > .byuiLogo {
		flex: 0 0 auto;
		width: 4em;
		fill: white;
	}
	header > h2 {
		margin: 0 var(--header-separation);
		flex: 1 1 auto;
		font-size: 125%;
		font-weight: normal;
		line-height: 1.15;
	}
	header > .menuIcon {
		flex: 0 0 auto;
		width: 1.2em;
		stroke: white;
		cursor: pointer;
	}
	header > .menuIcon.closed {
		display: none;
	}

	nav.menu {
		position: absolute;
		right: 0;
		z-index: 1;
		border: 1px solid white;
		padding-top: 0.5em;
		background-color: var(--byui-blue);
		color: white;
	}
	nav.menu.closed {
		display: none;
	}
	nav.menu li {
		padding: 0 1em 0.5em 1em;
		cursor: pointer;
	}
	nav.menu li:hover {
		font-weight: 900;
	}
	nav.menu li.first {
		border-top: 1px solid white;
		padding-top: 0.5em;
	}
	nav.menu li.dark,
	body.dark nav.menu li.light {
		display: block;
	}
	nav.menu li.light,
	body.dark nav.menu li.dark {
		display: none;
	}
	nav.menu a {
		/* Force the a tags to occupy the entire
		 * width of the navigation list item. */
		display: block;
		width: 100%;
	}
	nav.menu svg {
		width: 1em;
		vertical-align: middle;
		margin-right: 0.5em;
		stroke: white;
		fill: white;
	}

	header a:link,
	header a:hover,
	header a:active,
	header a:visited,
	nav.menu a:link,
	nav.menu a:hover,
	nav.menu a:active,
	nav.menu a:visited {
		text-decoration: none;
		color: inherit;
	}
}
@media print {
	header { display: none; }
	nav.menu { display: none; }
}


/* Paragraph classes that are used by combined/title.html which
 * is a title page that is used when the content for this course
 * is printed. */
section p.courseCode {
	margin: 6em 0 0 0;
	font-size: 180%;
	text-align: center;
}
section p.courseTitle {
	margin: 0.5em 0 0 0;
	color: var(--heading-fg-color);
	font-size: 220%;
	font-weight: bold;
	text-align: center;
}
section p.author {
	margin: 18em 0 0 0;
	font-size: 130%;
	font-weight: bold;
	text-align: center;
}


article {
	padding: 0 var(--article-padding-side);
	line-height: var(--article-line-height);
}

@media screen {
	article {
		max-width: 40em;
		margin: 0.5em auto 1em auto;
	}
}

article div.day {
	font-size: 130%;
}
article h1 {
	text-align: center;
	font-size: 175%;
	margin: 0 0 1em 0;
}
article p.subtitle {
	text-align: center;
	font-size: 130%;
	margin: -1em 0 1em 0;
}

article h2 {
	clear: both;
	font-size: 150%;
	font-weight: bold;
	margin: 1.5em 0 0.25em 0;
	padding-bottom: 0.25em;
	border-bottom: 1px solid;
}

article h3 {
	font-weight: bold;
	font-size: 130%;
	color: var(--heading-fg-color);
	margin: 1.5em 0 0.5em 0;
}

article h4 {
	font-weight: bold;
	font-size: 110%;
	margin: 1em 0 0.5em 0;
}

@media screen {
	article h2 > .copy,
	article h3 > .copy,
	article h4 > .copy {
		visibility: hidden;
		font-size: smaller;
		margin: 0 0 0 0.5em;
		padding: 0.1em 0.3em;
		color: var(--byui-blue);
		cursor: pointer;
	}

	article h2:hover > .copy,
	article h3:hover > .copy,
	article h4:hover > .copy {
		visibility: visible;
	}

	article h2 > .copy:hover,
	article h3 > .copy:hover,
	article h4 > .copy:hover {
		background-color: var(--python-bk-color);
	}

	/* Together the next two rules specify the width and height of videos. */
	article div.video {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
	}
	article div.video > iframe {
		position: absolute;
		width: 100%;
		height: 100%;
	}
}
@media print {
	section {
		page-break-before: always !important;
		widows: 2;
		orphans: 2;
	}

	article h2 > .copy,
	article h3 > .copy,
	article h4 > .copy {
		display: none;
	}
	article div.video {
		display: none;
	}

	/* As of November 2021, Chrome doesn't honor "page-break-after: avoid".
	 * Changing "-after" to "-inside" plus the following CSS rule is a
	 * work around. */
	article h1::after,
	article h2::after,
	article h3::after,
	article h4::after {
		content: " ";
		display: block;
		height: 1em;
		margin-bottom: -1em;
	}

	article h1,
	article h2,
	article h3,
	article h4 {
		page-break-inside: avoid !important;
	}
}

article p,
article div.p,
article form {
	margin: 1em 0;
}

article blockquote {
	margin: 1em 1em;
	border-left: 0.12em solid var(--bullet-fg-color);
	padding-left: 0.5em;
}

article div.search {
	margin: 1em auto;
	border: 1px solid var(--border-color);
	padding: 0.25em 0.5em;
	white-space: pre-line;
}

article .gpt {
	font-family: "Poor Story", fantasy;
	font-size: 130%;
}

article a:link { color: var(--link-before-fg-color); }
article a:hover { color: var(--link-hover-fg-color); }
article a:active { color: var(--link-active-fg-color); }
article a:visited { color: var(--link-visited-fg-color); }

@media screen {
	article dfn {
		color: var(--dfn-fg-color)
	}
}
@media print {
	article dfn {
		font-weight: bold;
	}
}

article b {
	font-weight: bold;
}
article em {
	font-style: italic;
}
article strong {
	font-weight: bold;
	font-style: italic;
	color: var(--strong-fg-color);
}
article var {
	font-style: italic;
}

article span.duration {
	font-size: smaller;
	white-space: nowrap;
}
article span.nowrap {
	white-space: nowrap;
}

input[type="text"],
button {
	font-size: inherit;
}

article details {
	margin-bottom: 1em;
}

article .clear {
	clear: both;
}


/* Lists */
article ol {
	margin: 0 0 1em 2em;
	list-style-type: decimal;
}

article ol > li ol > li ol {
	list-style-type: lower-roman;
}

article ol > li ol {
	list-style-type: lower-alpha;
}

article li {
	color: var(--bullet-fg-color);
}
article li > div {
	color: var(--fg-color);
	margin-left: 0.25em;
}

article ul {
	margin: 0 0 1em 2em;
	list-style-type: disc;
}

article li ul {
	list-style-type: circle;
}

article ol.long > li,
article ul.long > li {
	margin-bottom: 1em;
}

article ul.links {
	list-style-type: "»";
}
article ul.links > li {
	padding-left: 0.3em;
}

article ul.references,
article ul.tutorials,
article ul.videos,
article ul.mixed {
	list-style-type: none;
	margin-left: 1.5em;
}

article ul.references > li,
article ul.mixed > li.reference {
	background-image: url("icons/reference.svg");
	background-repeat: no-repeat;
	background-size: 1em auto;
	padding-left: 1.2em;
}

article ul.tutorials > li,
article ul.mixed > li.tutorial {
	background-image: url("icons/tutorial.svg");
	background-repeat: no-repeat;
	background-size: 1em auto;
	padding-left: 1.2em;
}

article ul.videos > li,
article ul.mixed > li.video {
	background-image: url("icons/video.svg");
	background-repeat: no-repeat;
	background-size: 1.3em auto;
	padding-left: 1.5em;
}

article ul.notes {
	list-style-type: "*";
}

article ul.notes > li {
	padding-left: 0.4em;
	color: var(--bullet-fg-color);
}

article dl.long dt {
	padding-bottom: 1em;
}

article dl.long dd {
	margin-bottom: 2em;
}


article img {
	max-width: 100%;
}


/* Code containers */
article code {
	font-family: "Source Code Pro", "Lucida Console", Consolas, monospace;
	white-space: nowrap;
}

article pre {
	padding: 0.25em 0.5em;
	font-family: "Source Code Pro", "Lucida Console", Consolas, monospace;
	line-height: 1.15;
}
@media screen {
	article code { font-size: 95%; }
	article pre {
		font-size: 95%;
		overflow: auto hidden;  /* Show a horizontal scroll bar when needed. */
	}
}
@media print {
	article code { font-size: 78%; }
	article pre {
		font-size: 78%;
		overflow: clip hidden;  /* Clip code that is too wide. */
	}
}

article pre em,
article code em {
	font-weight: bold;
	font-style: normal;
}


/* Container for console (terminal) input and output. */
article pre.console {
	margin: 1em 0 1em 1.25em;
	border: 1px solid var(--border-color);
	background-color: var(--console-bk-color);
}
article li pre.console {
	margin-left: 0;  /* In a list, don't indent pre.console elements. */
}


/* Tables */
article table {
	margin-bottom: 1em;
}

article table.center {
	margin: 1em auto;
}

article table th,
article table td {
	padding: 0.1em 0.25em;
}

article table.long tbody th,
article table.long tbody td {
	padding-bottom: 1em;
}

article table tr.center > td,
article table td.center { text-align: center; }

article table tr.number > td,
article table td.number { text-align: right; }

article table td span.hidden {
	visibility: hidden;
}

article table > thead > tr > th {
	vertical-align: bottom;
	text-align: center;
	font-weight: bold;
}

article table > tbody > tr > th {
	vertical-align: top;
	text-align: left;
	font-weight: bold;
}

article table.contents tbody > tr > th[colspan="3"] {
	font-weight: bold;
	font-size: 120%;
	color: var(--heading-fg-color);
	padding: 1.5em 0 0.5em 0;
}
article table.contents tbody > tr > td { padding-top: 0.3em; }
article table.contents tbody > tr > td:first-child { min-width: 10em; }


svg.cache { display: none; }

@media screen {
	footer {
		margin: 2em auto 1em auto;
		padding: 0 1em;
		max-width: 40em;
		display: flex;
		flex-flow: row nowrap;
		align-items: end;
	}
	footer > div {
		flex: 1 1 auto;
		font-size: 80%;
		line-height: 1.4;
	}
	footer > .up {
		flex: 0 0 auto;
		margin: 0 0 0 1em;
		width: 1.6em;
		border-color: var(--byui-blue);
		padding: 0.2em 0.3em 0 0.3em;
		background-color: var(--python-bk-color);
		stroke: var(--byui-blue);
		cursor: pointer;
	}
}
@media print {
	footer { display: none; }
}