/* Pygments Style */
@import url(pygments-default.css);

/* Noto Sans */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+Mono:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


/* Google Material Symbols */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

/* Cascadia Fonts */
@import url(cascadia.css);

:root {
    --serif-font: "Noto Serif", serif;
    --sans-serif-font: "Noto Sans", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
                       "Apple Color Emoji", "Segoe UI Emoji",
                       "Segoe UI Symbol";
    --monospace-font: "Cascadia Mono", "Consolas", "Menlo", "Noto Sans Mono", monospace;
    /* --old-code: rgba(128,127,127,0.1); */
    /* --code-bg: #f7f7f7; */
    --code-bg: mistyrose;
    /* --not-steelblue: #36638a; */
    --is-steelblue: mediumorchid;
    /* --not-steelblue: #427baa; */
    --not-steelblue: purple;
    --darker-steelblue: darkorchid;
    --lighter-steelblue: orchid;
    --left-insight-bg: seashell;
    --right-insight-bg: AliceBlue;
    /* --right-insight-bg: #cae2ea; */
    --left-insight-fg: black;
    --right-insight-fg: black;
    --right-insight-link: #3f7099;
}


/* ============================================================ */
/* Grid-Based Layout */
/* ============================================================ */

/* ----- Mobile First */

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [start masthead] 10em [sitenav] auto [main] 1fr [footer end] 3em;
    /* grid-template-rows: auto auto 1fr auto; */
    grid-template-areas:
        "header"
        "sitenav"
        "main"
        "footer";

    /* grid-gap: 10px; */
    max-width: 900px;
}

header #masthead {
    /* grid-column: 1 / -1; */
    grid-row-start: masthead;
    grid-column-start: masthead;
    grid-row-end: masthead;
}

nav {
  /* grid-row: 2; */
}

main {
    grid-row-start: main;
    grid-column-start: main;
    grid-column-end: main;
    /* grid-row: 3; */
    /* grid-column: 2; */
}

footer {
    grid-row-start: footer;
    grid-column-start: footer;
    grid-column-end: footer;
    /* grid-column: 1 / -1; */
}

#sitenav {
    grid-row-start: sitenav;
    grid-column-start: sitenav;
    grid-row-stop: sitenav;

    /* grid-row: 2 / 4; */
    /* grid-column: 1; */

    border: none;
}

#sitenav-toggle:checked ~ .sitenav-content {
    max-height: 500px; /* adjust this to fit your content */
}

#sitenav-toggle {
    display: none;
}

.sitenav-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.toggle-text {
    margin-left: 1em;
    content: url(../images/hamburger-white.svg);
}


/* /\* Quick Block Colors for Visualization *\/ */

/* header { background-color: blue; } */
/* main { background-color: pink; } */
/* footer { background-color: green; } */
/* nav { background-color: lightblue; } */
/* aside { background-color: orange; } */

/* ------ See below for adjustments for larger size canvases.

/* ------------------------------------------------------------
    End of basic layout.
------------------------------------------------------------ */


/* ============================================================ */
/* Appearance */

/* from bootstrap-reset.css for reference: */
/* body { */
/*     margin: 0; */
/*     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
/*     font-size: 1rem; */
/*     font-weight: 400; */
/*     line-height: 1.5; */
/*     color: #212529; */
/*     text-align: left; */
/*     background-color: #fff; */
/* } */


body {
    font-family: var(--serif-font);

    /* Make the content full height */
    min-height: 100vh;

    /* Set basic colors. */
    color: black;
    background-color: white;
    /* background-color: #f5f5f5; */
}


/* Links */
a {
    color: var(--not-steelblue);
    text-decoration: none;
}

a:visited {
    color: purple3;
    text-decoration: none;
}
a:hover {
    border-bottom: 1px dotted var(--not-steelblue);
    text-decoration: none;
}

a:active {
    color: white;
    background-color: var(--not-steelblue);
    text-decoration: none;
}


/* Not sure where this code should really be. */
/* Make the content centered */
/* .mystery { display: flex; flex-direction: column; justify-content: center;
/* align-items: center; */

/* Make the footer stick to the bottom */
/* position: relative; */
/* } */

tt {
    /* shouldn't really use tt, but sometimes it's useful */
    font-family: var(--monospace-font);
    font-size: 100%;
}
pre,
code {
    font-family: var(--monospace-font);
    font-size: 95%;
    font-weight: 350;
    color: #111;
    background-color: var(--code-bg);
    padding: 1px 2px;
    margin: 2px 0;
    border: 0;
    border-radius: 4px;
    word-break: break-word;
    word-wrap: break-word;
    /* border: 1px solid #aaa; */
}

strong code, dt code, b code {
    font-weight: 600;
}

pre {
    white-space: pre-wrap;
}

/********************************
 Section Titles (since the
 Sakai ones don't show up in the
 site export)
********************************/

/* General setup for headers. */

h1, h2, h3, h4, h5, h6 {
    font-family: "Noto Sans Display", var(--sans-serif-font);
    font-size: 1.2em;
    font-weight: bold;
    color: var(--not-steelblue);
    background-color: inherit;
    margin-bottom: 0.25em;
}


/* Header sizing/padding, if special. */
h1 {
    font-size: 140%;
}

h2 {
    font-size: 120%;
    /* font-weight: bold; */
    border-bottom: 2px solid var(--not-steelblue);
    /* margin & padding adjustments make bottom border span entire screen of small device */
    margin: 0 -1em 0.5em -1em;
    padding-left: 1em;
}
h3 {
    font-size: 110%;
    /* font-weight: bold; */
}
h4 {
    font-size: 100%;
    /* font-weight: bold; */
}
h5 {
    display: inline;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
}
h6 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-style: italic;
    font-weight: normal;
}


/* Code in headers */

h1 code, h2 code, h3 code, h4 code, h5 code, h5 code{
    font-family: var(--monospace-font);
    font-size: inherit;
    font-weight: 800;
    color: inherit;
    background-color: hsl(207,50%,96%); /* an even lighter var(--not-steelblue) */
}


/* Images */

img {
    max-width: 60%;
    margin: 0.75em 0;
}

img.htenem {
    height: 10em;
    object-fit:contain;
}

img.hfiveem {
    height: 5em;
    object-fit: contain;
}
img.wtenem {
    width: 10em;
    object-fit:contain;
}

img.wfiveem {
    width: 5em;
    object-fit: contain;
}

img.screenshot {
    max-width: 60%;
    margin: 0.5em auto 0.5em 20%;

    border: 1px solid #ddd;
    padding: 0.5em;
    box-shadow: 0.25em 0.25em 0.5em #ddd;
}

img.whiteboard {
    display: block;
    max-width: 90%;
    margin: 0.5em auto;
}

img.paradecor {
    max-width: 10em;
    margin: 0 0.25em 0.25em 0.25em;
    box-shadow: none;
    padding: none;
    border: none;
}

img.hardleft {
    margin-left: 0;
    float: left;
}

.paradecor.hardleft {
    transform: rotate(-20deg);
}
.paradecor.hardright {
    transform: rotate(30deg);
}

img.hardright {
    margin-right: 0;
    float: right;
}
/* img.rightside { */
/*     margin-right: 0; */
/*     margin-left: 100% - content-width; */


img.center {
    display: block;
    margin: 0 auto;
}


/* ------------------------------------------------------------ */
/* Page Layout */

#masthead {
    color: white;
    background-color: var(--not-steelblue);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sitelogo {
    /* display: inline; */
    content: url(https://www.cs.hmc.edu/~oneill/images/hmc-cs-logo.svg);
    /* font-size: 3em; */
    /* float: left; */
    /* margin: 0 2em 1em 0; */
    margin-right: 1ex; /* Minimum space */
}

#masthead > h1 {
    color: inherit;
    /* display: inline; */
    font-size: 2em;
    border: none;
    margin: 0;
    padding: 0;
    flex: 1 0 auto;
}

#loginbox {
    /* margin: auto; */
    font-size: 1em;
    float: right;
}

/* ---------------------------------------- */

main {
    margin: 0 1em;
    padding: 0;
    max-width: 900px;
    min-width: 400px;
}

#breadcrumbs {
    font-family: var(--sans-serif-font);
    font-size: 85%;
    color: var(--not-steelblue);
    margin-top: 0.5em;
}

#breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#breadcrumbs li {
    display: inline;
}

#breadcrumbs li a:after {
    color: #333;
    content: " » ";
}

#breadcrumbs li:after ul {
    content: "";
}

#breadcrumbs a {
    text-decoration: none;
}


/* ---------------------------------------- */

footer {
    font-family: var(--sans-serif-font);
    color: white;
    background-color: #000;
    font-size: 0.75em;
    text-align: center;
    border-top: 5px solid goldenrod;
    padding: 0.5em;
    height: max-content;
}

footer a {
    color: white;
}

footer a:hover {
    text-decoration: underline;
}

/* ---------------------------------------- */
/* Site Navigation */

#sitenav {
    font-family: var(--sans-serif-font);
    color: white;
    background-color: var(--not-steelblue);
    padding: 0.25em 0 0 0;
    /* width: fit-content; */
}

#sitenav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-top: 2px solid white;
}

#sitenav li {
    margin: 0;
    padding: 0;
}

#sitenav a {
    display: block;
    margin: 0 auto;
    padding: 0.25em 0.5em;
    color: white;
    text-decoration: none;
    border-bottom: 2px solid white;
}

#sitenav a:hover {
    color: var(--not-steelblue);
    background-color: LightSteelBlue;
    text-decoration: none;
}

#sitenav a:active {
    /* color: white; */
    background-color: plum;
}


/* Previous/Next/Up Navigation */

#prev_next_nav {
    font-family: var(--sans-serif-font);
    margin: 1em 0;
    margin-bottom: 5em;
}

#prev_next_nav a,
#prev_next_nav a:visited {
    color: black;
    background-color: white;
    border: 1px solid var(--not-steelblue);
    text-decoration: none;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

#prev_next_nav a:hover {
    text-decoration: none;
    color: white;
    background-color: var(--not-steelblue);
}

#prev_next_nav a:active {
    background-color: plum;
}

.nav-next,
.nav-prev {
    padding: 0.25em;
}

.nav-next:after {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 125%;
    content: ' ︎⇨';
}
.nav-prev:before {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 125%;
    content: '⇦ ';
}

.nav-next-parent:after {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 120%;
    content: ' ︎⇧';
}

.nav-prev-parent:before {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 120%;
    content: '⇧ ';
}


/* .nav-prev-sibling {} */
/* .nav-next-sibling {} */


/* Login/logout Box */

#login-box,
#logout-box,
.login-name {
    font-family: var(--sans-serif-font);
    font-size: 85%;
}

#login-box button,
#logout-box button {
    font-size: 85%;
}


/* ---------------------------------------- */
/* Utility Classes */

.errorerror {
    display: block;
    background-color: orangered;
    padding: 3em;
    font-size: 1em;
    font-weight: bold;
    color: white;
}

.codehilite {
    display: block;
    background-color: #f7f7f7;
    padding: 0.5em;
    margin: 1em 0;
    border: 1px solid lightgray;
    border-radius: 10px;
    /* box-shadow: 3px 3px 10px 0px  lightgray; */
}

.codehilite pre,
.codehilite code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

.codehilite pre {
    white-space: pre;
    overflow: auto;
}

/* Wrap around the codehilite div to provide a "click to copy" feature */

div.copy-snippet pre:after {
    float: right;
    padding: 0;
    margin: 0;
    margin-top: -1em;
    font-family: var(--sans-serif-font);
    font-size: 80%;
    content: 'click to copy';
    color: grey;
    background-color: inherit;
}

/* Toast for feedback when copying code snippets */
.feedback-toast {
    font-family: var(--sans-serif-font);
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.feedback-toast.toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* A class for pre.pseudocode, which we want to treat kind of like <pre>, but with */
/* a different typeface. <pre> maintains line breaks, which we want.  We can
 * also use other styling elements, **but Markdown does not work** */

pre.pseudocode {
    font-family: var(--sans-serif-font);
    background-color: lavender;
    padding: 1em;
    line-height: 1.6;
    font-weight: 500;
    font-size: 100%;
}

place-holder {
    /* Return to body text font, but italicized, and put guillemots around it */
    font-family: var(--serif-font);
    font-style: italic;
    color: darkblue;
    /* use before and after pseudoelements to add guillemots */
}
place-holder::before {
    content: "‹";
}
place-holder::after {
    content: "›";
}

.sansserif {
    font-family: var(--sans-serif-font);
}

div.textbox {
    /* font-family: var(--sans-serif-font); */
    font-size: 14px;
    font-weight: normal;
    /* font-weight:200; */
    line-height: 1.3;
    color: #000;
    background-color: #fff;
}

div.textbox > h2 {
    margin-top: 0;
}

blockquote {
    width: 70%;
    padding: 0 0.5em;
    margin: 1em auto 1em 3em;;
    border-left: 5px solid lightsteelblue;
}

figure {
    display: block;
    width: 100%;
    margin: 1em 0;
}

figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

figcaption {
    margin: 0.5em 0;
    font-family: var(--sans-serif-font);
    text-align: center;
}

div.button {
    margin-top: 1em;
    margin-bottom: 1em;
}

div.button>a:link, div.button>a:visited {
    text-transform: capitalize;
    font-family: var(--sans-serif-font);
    font-size: 85%;
    border: 1px solid lightsteelblue;
    width: fit-content;
    color: white;
    background-color: var(--not-steelblue);
    border-radius: 5px;
    padding: 0.5em;
}

div.button>a:hover {
    background-color: lightsteelblue;
}

div.button>a:active { background-color: deepskyblue; }


/* Buttons in lists */

#main_content > ul > li {
    padding: 0.5ex 0;
}

a.biglink, a.linkbutton {
    font-family: var(--sans-serif-font);
    color: black;
    border: 1px solid var(--not-steelblue);
    border-radius: 5px;
    padding: 0.25em;
    margin-right: 0.5em;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

a.external-biglink {
    color: white;
    background-color: var(--not-steelblue);
}
/*
a.biglink:visited {
    color: inherit;
}
*/

a.biglink:hover, a.linkbutton:hover, a.linkbutton:hover code {
    color: black;
    background-color: lightsteelblue;
}
/* biglink:focus { */
/*     color: white; */
/*     background-color: lightsteelblue; */
/* } */

a.biglink:active, a.linkbutton:active, a.linkbutton:active code {
    background-color: plum;
    color: white;
}


/* Unreleased Material/Dates/Links */

span.unreleased-indicator {
    font-family: var(--sans-serif-font);
    font-size: 80%;
    color: darkred;
}

p.unreleased-indicator {
    font-family: var(--sans-serif-font);
    font-size: 80%;
    color: darkred;
}



/******************************
 Instructor Insights (AKA Animal Friends)
******************************/

/* Speech Bubble Insight */
.insight-section {
    /* background-color: #f7f7f7; */
    /* margin: 2em auto;
    padding: 0.25em;
    border-radius: 20px;
    border: 1px solid lightgray;
    width: 80%;
   */
}

.insight-section ul li {
    list-style: none;
    /* margin-top: 10px; */
    margin-top: 0.5em;
    position: relative;
}
.insight-section ul {
    padding: 0 0.25em;
    margin: 0.75em 0;
}

.left-insight ul li,
.right-insight ul li {
    list-style: disc inside none;
}

.left-insight ol li,
.right-insight ol li {
    list-style: normal;
}

.left-insight ol ul li,
.right-insight ol ul li {
    list-style: disc outside none;
    margin-left: 0.75em;
}

.left-insight .speaker,
.right-insight .speaker {
    width: 70px;
    height: 70px;
    float: left;
    margin: 0px 5px;
    border-radius: 50%;
    object-position: center;
    object-fit: cover;
    border: none;
    box-shadow: none;
    box-shadow: 2px 2px 2px #ddd;
}

.right-insight .speaker {
    float: right;
}

.left-insight,
.right-insight {
    overflow: hidden;
    position: relative;
}

.left-insight .speechbubble,
.right-insight .speechbubble {
    background-color: var(--left-insight-bg);
    padding: 10px;
    color: black;
    border-radius: 5px;
    float: left;
    width: 60%;
    /* margin-bottom: 0.25em; */
    margin-left: 2px;
}

.left-insight .speechbubble p:last-child,
.right-insight .speechbubble p:last-child {
    padding: 0;
    margin: 0;
}

.right-insight .speechbubble {
    float: right;
    background-color: var(--right-insight-bg);
    color: black;
    margin-right: 2px;
    margin-left: 0px;
}

.right-insight .speechbubble a:link {
    color: var(--right-insight-link);
}

.left-insight:before {
    content: " ";
    position: absolute;
    top: 0px;
    left: 65px;
    bottom: 150px;
    border: 15px solid transparent;
    border-top-color: var(--left-insight-bg);
}

.right-insight:before {
    content: " ";
    position: absolute;
    top: 0px;
    right: 65px;
    bottom: 150px;
    border: 15px solid transparent;
    border-top-color: var(--right-insight-bg);
}

.speechbubble {
    box-shadow: lightgray 3px 3px 10px 0px;
    min-height: 70px;
    margin-bottom: 2ex;
}


/* .insight-sections near other components */

table + div.insight-section {
    margin-top: 2em;
}


/* ---------------------------------------- */
/* Tables */

table {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    max-width: 90%;
    margin: 0.5em auto;
}

thead {
    border-bottom: 1px solid black;
    font-weight: bold;
}

td, th {
    padding: 0.5em;
    vertical-align: top;
}

.no-rules,
.no-rules table,
.no-rules table thead {
    border: none;
}

.no-thead table thead {
    border: none;
    display: none;
}

.no-indent table {
    margin: 1em;
}

.tighter table td,
.tighter table th,
table.tighter td,
table.tighter th {
    /* table row sizes are dependent on size of content */
    margin: 0.5em 0;
    padding: 0.25em;
}

.boxy table {
    border: 1px solid darkgray;
    border-collapse: collapse;
}

.boxy table td,
.boxy table th {
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.boxy table th {
    background-color: #f7f7f7;
}

.boxy tr:last-child td {
    border-bottom: none;
}

.boxy td:last-child, th:last-child {
    border-right: none;
}

table.schedule {
    width: 100%;
}

table.schedule tr>th {
    width: 10%;
}

table.schedule tr>td {
    width: 40%;
}

table.schedule .goallist {
    font-family: var(--sans-serif-font);
    font-size: 80%;
    padding: 4px;
    color: inherit;
    background-color: #eeeeff55;
    border: 1px solid #eee;
    border-radius: 5px;
    width: fit-content;
    margin: 0.25em 0;
}

/* Loosen up lists. */

ul,
ol {
    margin: 2ex 0 3ex 0; /* add some space above and below */
}

ul ol,
ol ul,
ul ul,
ol ol {
    margin: 0; /* don't add vertical space for nested lists */
}

li {
    margin: 0.5ex 0; /* add some space above and below list items */
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol ol {
    list-style-type: lower-roman;
}

/* Definition lists */

dl {
    margin: 1em 2em;
}

dt {
    font-family: var(--sans-serif-font);
    font-weight: bold;
}

dd {
    margin-left: 2em;
}


.highlight {
    background-color: lemonchiffon;
}

/* Special code to handle table for syllabus page. */
#gradetable {
    /* border-top: 2px solid black; */
    /* border-bottom: 2px solid black; */
    width: 85%;
    margin: 1em 10%;
}

#gradetable table {
    padding: 0;
    margin: 0;
}

#gradetable tr,
#gradetable td,
#gradetable th {
    padding: 0;
    margin: 0;
    border: none;
}

#gradetable td,
#gradetable th {
    padding: 0 2em;
}

#gradetable thead {
    border-bottom: 1px solid black;
}

#gradetable th {
    font-weight: bold;
}

p.footnote {
    font-size: 85%;
    width: 50%;
    margin-left: 25ch;
}

.footnote-mark {
    margin-left: -5ch;
}

.admonition {
    width: 80%;
    font-size: 110%;
    margin: 1em auto;
    padding: 0.5em;
    border: 2px solid red;
}

.admonition h2,
.admonition h3,
.admonition h4,
.admonition h5,
.admonition h6 {
    color: firebrick;
}

prereqs-warning {
    width: 80%;
    margin: 1em auto;
    padding: 0.5em;
    border: 2px solid firebrick;
    border-radius: 5px;
    background-color: #ffeeee;
    box-shadow: lightgray 3px 3px 10px 0px;

}

prereqs-warning h2 {
    margin: 0 0 0.5em 0;
    padding: 0;
    color: firebrick;
    border-bottom: 2px solid firebrick;
}


.comedybox,
.commentarybox,
.deeper-dive,
.headbox,
.hints {
    background: #fafafa;
    color: inherit;
    /* width: 90%; */
    padding: 0.5em 1em 0.5em 1em;
    border: 1px solid lightgrey;
    border-radius: 5px;
    box-shadow: lightgray 3px 3px 10px 0px;
    margin-bottom: 1em;
}

.admonition p:last-of-type,
.comedybox p:last-of-type,
.commentarybox p:last-of-type,
.deeper-dive p:last-of-type,
.headbox p:last-of-type,
.hints p:last-of-type {
    margin-bottom: 0;
}

/* Basic set up for headers inside our boxen. */
.admonition h2,
.admonition h3,
.admonition h4,
.admonition h5,
.admonition h6,
.comedybox h2,
.comedybox h3,
.comedybox h4,
.comedybox h5,
.comedybox h6,
.commentarybox h2,
.commentarybox h3,
.commentarybox h4,
.commentarybox h5,
.commentarybox h6,
.deeper-dive h2,
.deeper-dive h3,
.deeper-dive h4,
.deeper-dive h5,
.deeper-dive h6,
.headbox h2,
.headbox h3,
.headbox h4,
.headbox h5,
.headbox h6,
.hints h2,
.hints h3,
.hints h4,
.hints h5,
.hints h6 {
    font-size: 110%;
    font-weight: bold;
    border: none;
    margin: 0;
    padding: 0;
}

.deeper-dive::before {
    content: url("../images/avatars/rabbithead.png");
    transform: scale(0.5);
    /* height: 50px; */
    /* width: 5%; */
    /* max-height: 5%; */
    /* max-width: 50px; */
    /* border: 6px double goldenrod; */
    /* height: 50px; */
    border: 6px double goldenrod;
    margin: -2em -2em -2.5em -2.5em;
    background-color: palegoldenrod;
    /* object-position: center; */
    /* overflow: hidden; */
    /* object-fit: scale-down; */
    border-radius: 50%;
    box-shadow: 2px 2px 2px #ccc;
    float: right;
}

.hints {
    font-family: var(--sans-serif-font);
    font-size: 90%;
    background-color: floralwhite;
    border-color: thistle;
    border-radius: 10px;
}

.headbox {
    padding-top: 0;
}

.headbox > h2:first-child,
.headbox > h3:first-child,
.headbox > h4:first-child {
    width: full;
    margin: 0 -1em 0.5em -1em;
    padding: 0.25em 1em;
    background-color: var(--not-steelblue);
    color: white;
    border-bottom: 5px solid goldenrod;
    border-radius: 5px 5px 0px 0px;
}

.headbox > h2:first-child code,
.headbox > h3:first-child code,
.headbox > h4:first-child code,
.headbox > h5:first-child code,
.headbox > h6:first-child code,
.headbox > h2:first-child pre,
.headbox > h3:first-child pre,
.headbox > h4:first-child pre,
.headbox > h5:first-child pre,
.headbox > h6:first-child pre {
    background-color: #b0c4de55;
    color: #white;
}

.pullout {
    font-size: 85%;
    border-top: 2px solid lightgrey;
    border-bottom: 2px solid lightgrey;
    float: none;
}

.pullout.headbox,
.pullout.deeper-dive,
.pullout.commentarybox,
.pullout.comedybox,
.pullout.hints {
    margin-top: 0;
}

.pullout .kbkey,
.pullout .keyboardkey,
.pullout .app-menu-example {
    padding: 0 2px 0 2px;
    font-size: 85%;
}

.to-complete-page {
    clear: both;
}

.to-complete-page .question {
    background-color: #fafaff;
    margin: 6em 0;
    width: 100%;
    border: 2px solid var(--not-steelblue);
}

.quoted-content {
    display: block;
    width: 60%;
    margin: 2em auto;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 5px;
    background-color: #fafafa;
    box-shadow: lightgray 3px 3px 10px 0px;
}

.pictureframe {
    padding: 2px;
    border: 3px solid black;
    border-radius: 10px;
    width: 80%;
    margin: 1em auto 1em 15%;
}

.center {
    width: fit-content;
    margin: 0 auto;
}


/* Regular YouTube Videos */

iframe.youtubevideo {
    display: block;
    /* Height and width from tinkering around.  In 4:3 ratio as that seems to be
   what YouTube is using for preview frames. */
    height: 375px;
    width: 500px;
    margin: 0.5em auto;
}

/* ------------------------------------------------------------
Notes on usage.

A `columnset` is a _pair_ of blocks containing written material.

<div class="columnset" markdown=1>
<div class="leftcolumn" markdown=1>
</div> <!-- end of left column -->
<div class="rightcolumn" markdown=1>
</div> <!-- end of right column -->
</div> <!-- end of columnset -->

*/

/* .columnset { */
/*     float: left; */
/*     width: 100%; */
/*     margin: 2em 0; */
/*     font-weight: normal; */
/* } */

.columnset {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: [colstart coltop] 1fr [colend colbottom];
    grid-template-areas:
        "colleft"
        "colright";
    grid-gap: 0;
}

.leftcolumn {
    grid-row: auto;
    /* grid-column-start: colleft; */
    /* grid-row-end: colleft; */
    /* border: 1px solid green; */
}

.rightcolumn {
    grid-row: auto;
    /* grid-row-start: colstart; */
    /* grid-column-start: colleft; */
    /* grid-row-end: colleft; */
    /* border: 1px solid red; */
}



.columnset .codehilite pre,
.columnset pre.pseudocode {
    /* , .columnset .codehilite pre code */
    /* font-size: 90%; */
    overflow: auto;
}

/* Make all headers the same size inside columns. */
.columnset h1,
.columnset h2,
.columnset h3,
.columnset h4,
.columnset h5 {
    margin-top: 0;
    padding-top: 0;
    background-color: transparent;
    font-size: 100%;
    border: none;
}

.columnset .insight-section {
    margin-top: 0;
}

.columnset img.whiteboard {
    /* margin: 0; */
    /* padding: 0; */
    /* width: ; */
    /* max-width: 90%; */
}


/* End of column layout. */


/* Fake small caps */
.smallcaps {
    font-size: 85%;
}

div.excitement {
    max-width: 90%;
    margin: 0.5em auto;
    padding: 2em;
    border: 1px solid purple;
    background:
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
        linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
    background-color: #840b2a;
    border-radius: 2%;
}

.excitement img {
    width: 80%;
    border: 2px solid ghostwhite;
    border-radius: 50%;
}

.excitement p{
    text-align: center;
    font-size: 200%;
    font-family: var(--sans-serif-font);
    width: 100%;
    margin: 0;
    padding: 0.75em;
    text-shadow: #fff 0px 0px 4px;
}


/* ------------------------------------------------------------ */
/* Questions */

div.question {
    display: block;
    margin: 0.5em auto;
    background-color: whitesmoke;
    color: inherit;
    max-width: 90%;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 5px;
}

.to-complete-page .question {
    width: 100%;
}

.leftcolumn>div.question,
.rightcolumn>div.question {
    margin-top: 0.25em;
    width: 100%;
}

.question h2,
.question h3,
.question h4,
.question h5 {
    font-size: 110%;
    border: none;
    margin: 0;
    padding: 0;
}

.question h3 {
    margin-bottom: 1ex;
}


.question form > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.question form > ul > li {
    margin: 0;
    margin-bottom: 0.75em;
    padding: 0;
}

.question ul+p,
.question textarea+p,
.question input+p,
.range-question+p {
    margin-top: 2ex;
}

.question ul+h3,
.question textarea+h3,
.question input+h3,
.range-question+h3 {
    margin-top: 3ex;
}


/* Labels */

.question label {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-left: 2em;
    max-width: 80%;
}


/* -------------------- */
/* Input types */

.question textarea,
.question input[type=textarea] {
    appearance: none;
    width: 100%;
    min-height: 5em;
    margin: 0;
    padding: 0;
    resize: vertical;
    overflow: auto;
    font-family: var(--monospace-font);
}

.question input[type=radio],
.question input[type=checkbox] {
    display: inline-block;
    appearance: none;
    height: 1rem;
    width: 1rem;
    border: 1px solid black;
    background-color: white;
    transition: 0.2s all linear;
    vertical-align: top;
    margin-top: 0.667ex;
    padding: 0;
}

.question form input[type=radio] {
    border-radius: 50%;
}

.question input[type=radio]:checked {
    background: white;
    border: 4px solid steelblue;
}

.question input[type=checkbox]::before {
    position: relative;
    color: white;
    content: '✘';
    right: -2px;
    top: -6px;
    visibility: hidden;
}
.question input[type=checkbox]:checked,
.question input[type=checkbox]:checked::before {
    visibility: visible;
}

.question input[type=checkbox]:checked {
    background: steelblue;
}

.range-question {
    margin-top: 1em;
    font-family: var(--sans-serif-font);
}

.range-question input[type=range] {
    appearance: system;
    padding: 0;
    margin: 0 1em;
    vertical-align: text-top;
}


/* -------------------- */
/* Submit buttons. */

.question button[type=submit],
.question input[type=submit] {
    display: block;
    /* clear: both; */
    border: 2px solid lightgrey;
    color: white;
    background-color: var(--not-steelblue);
    margin: 0.5em 0 0 auto;
    font-family: var(--sans-serif-font);
}


.question button[type=submit]:hover,
.question input[type=submit]:hover {
    background-color: lightsteelblue;
    color: var(--not-steelblue);
}

.question button[type=submit]:active,
.question input[type=submit]:active {
    background-color: var(--not-steelblue);
    color: white;
}

/* End submit buttons.
/* -------------------- */

/* Show answers button */

.question button.instructor-button {
    /* clear: both; */
    border: 2px solid lightgrey;
    color: black;
    background-color: var(--lighter-steelblue);
    margin: 0.5em 1em 0 0;
    font-family: var(--sans-serif-font);
    /* smaller than usual */
    font-size: 80%;
}

.question button.instructor-button:hover {
    border-color: var(--not-steelblue);
}

.question button.instructor-button:active {
    background-color: var(--not-steelblue);
    color: white;
}

/* End question.
/* ------------------------------------------------------------ */

div.instructor-controls {
    margin: 2em auto;
    /* background-color: #fafafa; */
    background-color: lightblue;
    color: inherit;
    width: 80%;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 5px;
    box-shadow: lightgray 3px 3px 10px 0px;
}

.instructor-controls h3 {
    margin: 0;
    padding: 0;
}

/* AI Answer Tooltip */

.answer-container {
    position: relative;
    display: block;
}

.ai-answer-tooltip {
    display: none;
    position: absolute;
    background: rgba(249, 249, 249, 0.94);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 600px;
    min-width: 480px;
    left: 10%;
    margin-left: 10px;
    top: 0;
}

.answer-container:hover .ai-answer-tooltip {
    display: block;
}


/* These are dynamically overridden by JavaScript depending on logged-in status. */

.when-logged-in {
    display: none;
}

.when-logged-out {
    display: none;
}

.cmccomment {
    width: 80%;
    padding: 1em;
    border: 2px solid darkgreen;
    border-radius: 10px 5px;
    background-color: rgb(32, 178, 170, 10%);
    color: darkgreen;
}

.appbutton,
.app-menu-example, .keyboardkey {
    font-family: var(--sans-serif-font);
    font-size: 95%;
    font-weight: semibold;
    padding: 0 3px 0px 3px;
    margin: auto;
    border: 1px solid #888;
    border-radius: 5px;
    background-color: ghostwhite;
}

.kbkey,
.keyboardkey {
    border: 1px solid #888;
    padding: 2px;
    border-radius: 3px;
    background-color: ghostwhite;
}

.nudger {
    margin-left: 2em;
}

.nudgel {
    margin-left: -2em;
}

/* Things pulled from other files; maybe to be incorporated.  */


/* ============================================================ */
/* ----- Changes for a Larger Canvas */

@media (min-width: 720px) {
    .container {
        display: grid;
        grid-template-columns: [start sidebar] auto [main] 3fr;
        grid-template-rows: [start masthead] 5rem [main] auto [footer end] 3em;
        /* grid-template-columns: 1fr 1fr; */
        /* grid-template-rows: auto auto auto 1fr auto; */
        /* grid-gap: 10px; */
        grid-template-areas:
            "masthead masthead"
            "sitenav main"
            "footer footer";
        max-width: 1200px;
        /* margin: 0 auto; */
        margin: 0 auto;
    }

    header {
        grid-row-start: masthead;
        grid-column-start: masthead;
        grid-row-end: masthead;
        grid-column-end: masthead;
    }

    nav {
        /* grid-row: 3; */
    }

    main {
        grid-row-start: main;
        grid-column-start: main;
        grid-column-end: main;
        /* grid-row: 4; */
    }

    #sitenav {
        grid-row-start: sitenav;
        grid-column-start: sitenav;
        grid-column-end: sitenav;
        /* grid-row: 2; */
        border-right: 1px solid #333;
        /* margin-right: 2em; */
    }

    footer {
        grid-row-start: footer;
        grid-column-start: footer;
        grid-column-end: footer;
    }

    #sitenav-toggle:checked ~ .sitenav-content {
        max-height: none;
    }

    .toggle-sitenav ~ .sitenav-content {
        max-height: none;
    }

    .toggle-text {
        display: none;
    }
    .sitenav-content {
        display: contents;
    }

    /* ---------------------------------------- */
    /* Adjust site navigation. */

    #sitenav {
        color: black;
        background-color: inherit;
        padding: 0.25em 0 0 0;
    }

    #sitenav ul {
        border: none;
    }

    #sitenav li {
    }

    #sitenav a {
        display: block;
        margin: 0;
        padding: 0.25em 0.5em;
        color: black;
        text-decoration: none;
        border: none;
    }

    #sitenav a:hover {
        color: white;
        background-color: var(--not-steelblue);
        text-decoration: none;
    }

    #sitenav a:active {
    }

    /* End site navigation styles. */


    /* ---------------------------------------- */
    /* Adjust headers */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-left: 0;
        padding-left: 0;
        margin-right: 0;
    }

    h2, h3 {
        margin-top: 1em;
    }

    h4, h5, h6 {
        margin-top: 0.5em;
    }

    h1 code,
    h2 code,
    h3 code,
    h4 code,
    h5 code {
        /* font-family: var(--monospace-font); */
        /* font-size: inherit; */
        /* color: inherit; */
        /* background-color: inherit; */
    }


    .codehilite,
    pre.pseudocode {
        margin: 2em auto;
        max-width: 718px;
    }

    /* Adjust our special boxes. */

    .headbox,
    .deeper-dive,
    .commentarybox,
    .comedybox,
    .question {
        display: block;
        width: 80%;
        margin: 2em auto;
        box-shadow: 0.25em 0.25em 0.5em #ddd;
    }

    div.question {
        margin: 3em auto;
    }

    .admonition h2,
    .admonition h3,
    .admonition h4,
    .admonition h5,
    .admonition h6,
    .comedybox h2,
    .comedybox h3,
    .comedybox h4,
    .comedybox h5,
    .comedybox h6,
    .commentarybox h2,
    .commentarybox h3,
    .commentarybox h4,
    .commentarybox h5,
    .commentarybox h6,
    .deeper-dive h2,
    .deeper-dive h3,
    .deeper-dive h4,
    .deeper-dive h5,
    .deeper-dive h6,
    .headbox h2,
    .headbox h3,
    .headbox h4,
    .headbox h5,
    .headbox h6,
    .hints h2,
    .hints h3,
    .hints h4,
    .hints h5,
    .hints h6 {
        margin: 0.5em 0 0.25em 0;
        padding: 0;
    }

    /* Strip top margin from header at top of box. */
    .admonition h2:first-child,
    .admonition h3:first-child,
    .admonition h4:first-child,
    .admonition h5:first-child,
    .admonition h6:first-child,
    .comedybox h2:first-child,
    .comedybox h3:first-child,
    .comedybox h4:first-child,
    .comedybox h5:first-child,
    .comedybox h6:first-child,
    .commentarybox h2:first-child,
    .commentarybox h3:first-child,
    .commentarybox h4:first-child,
    .commentarybox h5:first-child,
    .commentarybox h6:first-child,
    .deeper-dive h2:first-child,
    .deeper-dive h3:first-child,
    .deeper-dive h4:first-child,
    .deeper-dive h5:first-child,
    .deeper-dive h6:first-child,
    .headbox h2:first-child,
    .headbox h3:first-child,
    .headbox h4:first-child,
    .headbox h5:first-child,
    .headbox h6:first-child,
    .hints h2:first-child,
    .hints h3:first-child,
    .hints h4:first-child,
    .hints h5:first-child,
    .hints h6:first-child {
        margin-top: 0;
    }


    .deeper-dive::before {
        content: url("../images/avatars/rabbithead.png");
        /* background-color: palegoldenrod; */
        transform: none;
        margin: -3em -3em 0.25em 0.25em;
        padding: 0;
        shape-outside: circle(100px);
    }

    .deeper-dive {
        /* compensate for the height of the rabbit */
        margin-top: 3em;
    }

    .pullout {
        width: 40%;
        margin-left: 1em;
        border: none;
        float: right;
    }


    .hints {
    }

    div.question {
        padding: 1em 3em;
        max-width: 100%;
    }

    img.whiteboard {
        display: block;
        width: 80%;
    }

    .columnset img.whiteboard {
        margin: 0;
        padding: 0;
        width: 100%;
    }


    iframe.youtubevideo {
        display: block;
        /* Height and width from tinkering around.  In 4:3 ratio as that seems to be
           what YouTube is using for preview frames. */
        height: 420px;
        width: 560px;
        margin: 1em auto;
    }

    figure {
        width: 90%;
        margin: 1em auto 1.5em auto;
    }

    figure img {
        max-width: 90%;
        margin: 0 auto;
    }


    /* Adjustments to our .excitement. */

    div.excitement {
        margin: 1em auto;
        padding: 8em;
        border-radius: 100%;
        box-shadow: 0.25em 0.25em 0.5em #ddd;
    }

    .excitement img {
        max-width: 98%;
    }

    .excitement p {
        text-shadow: #ddd 2px 2px 2px;
    }

} /* End of adjustments for browser windows >= 720px. */


@media (min-width: 1000px) {

    /* Column layout with larger window.  Note that right columns are cut off
       by the edge of the browser until the browser window is 1000px wide, so
       we make our adjustments here rather than in the 720px+ section. */

    .columnset {
        margin: 2em 0;
        display: grid;
        width: 100%;
        grid-template-columns: [colstart leftcol] 48% 4% [rightcol] 48% [colend];
    }

    .leftcolumn {
        grid-row: auto;
        grid-column: leftcol;
    }

    .rightcolumn {
        grid-row: auto;
        grid-column: rightcol;
    }

    .leftcolumn>iframe.youtubevideo,
    .rightcolumn>iframe.youtubevideo {
        height: 315px;
        width: 420px;
        margin: 0 auto 1em auto;
    }

    /* End of column layout */
} /* End of adjustments for browser window 1000px. */