@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap);
/* reset.css */

* { box-sizing: border-box; }

a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, 
dd, del, dfn, div, dl, dt, em, figcaption, figure, fieldset, font, form, h1, h2, h3, h4, h5, h6, 
html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, 
small, span, strike, strong, sub, sup, table, tbody, td tfoot, th, thead, tr, 
tt, ul, var {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus { outline: 0; }
blockquote, q { quotes: "" ""; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
body { background: #fff; line-height: 1; color: #000; }
caption, th, td { text-align: left; font-weight: normal; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
/*-------------------------------+
 | Site: The Joy of Cryptography |
 | Part: Primary stylesheet      |
 +-------------------------------*/

/* Imports
 ==================================================*/
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap);


/* temp */
.main-content .disabled a, 
.main-content .disabled li,
.main-content li.disabled {
    color: #aaa !important;
}
.menu-contents .disabled a, 
.menu-contents .disabled li,
.menu-contents li.disabled {
    color: #aaa !important;
}
.footer .disabled a, 
.footer .disabled li,
.footer li.disabled {
    color: #888 !important;
}

span.embargo-link {
    color: var(--primary); text-decoration: underline; 
}

/* Fonts
==================================================*/
body { font-family: "IBM Plex Serif", serif; }
tt { font-family: "IBM Plex Mono", monospace; }

.aside-margin,
.btn,
.theoremlike-header,
.proof-header,
.chapter-secondary,
.exercises-head .difficulty,
.exercises-hint,
.feature-header,
.footer,
.header,
h1, h2, h3, h4, h5, h6,
.outline-head,
.page-nav,
.paging-head,
.subheader {
    font-family: "IBM Plex Sans", sans-serif;
}


/* Basics
==================================================*/
:root {
    --grid: repeat(20, 1fr);
/*    --subgrid: repeat(16, 1fr); */
      --subgrid: 3.5rem repeat(15, 1fr); /* first col needs to be bigger */
    --page-width: 1320px;
    --hspace: 40px;
    --vspace: 4vw;
    
    /* Colors */
    --correct: #109447;
    --correct-screen: rgba(16, 148, 71, 0.1);
    --incorrect: #b51f24;
    --incorrect-screen: rgba(181, 31, 36, 0.1);
    --primary: #24608a;
    
        /* Topic colors */
        --unconditional-cryptography:   hsl(48, 14.4%, 40.8%);
        --pseudorandomness:             hsl(95.5, 25.8%, 37.8%);
        --symmetric-key-encryption:     hsl(185.2, 32.1%, 42.2%);
        --hashing:                      hsl(210.6, 29.3%, 35.5%);
        --public-key-cryptography:      hsl(22.7, 46.8%, 46.7%);
        --advanced-topics:              hsl(2.3, 47.1%, 43.7%);
        --accent:                       hsl(216, 9%, 32.7%);

    /* pagefind */
        --pagefind-ui-font: inherit; 
}

a { color: var(--primary); text-decoration: underline; }
a:hover { color: var(--primary); text-decoration: none; }
blockquote { font-style: italic; padding-left: 1.5rem; }
blockquote, dl, ol, p, table, ul, center { margin-bottom: 1.22rem; }
p:last-child { margin-bottom: 0; }
body { font-size: 1.125rem; line-height: 1.777; }
cite, em { font-style: italic; }
figure { margin: 1.5rem 0; }
figure, figcaption { text-align: center; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

/* toplevel exercises */
.chapter-primary > ol.exercises                    { counter-reset: exercise; }
.chapter-primary > ol.exercises > li               { counter-increment: exercise; }
.chapter-primary > ol.exercises > li::marker       { content: var(--chapnum) "." counter(exercise) ". "; }

/* sub-exercises */
ol.exercises li ol.exercises li::marker { content: "(" counter(list-item,lower-alpha) ") "; }

h1 { font-size: 3.815rem; font-weight: bold; line-height: 1.081; margin-bottom: 1.22rem; }
h2 { font-size: 1.44rem; font-weight: bold; line-height: 1.128; margin: 1.5em 0 0.651em; }
h3 { font-size: 1.2rem; font-weight: bold; line-height: 1.198; margin: 1.2em 0 1em; }
img { max-width: 100%; }
strong { font-weight: bold; }
ol { list-style: decimal; padding-left: 2em; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; margin-top: 0.5em; }
section { padding: var(--vspace) var(--hspace); }
sub { vertical-align: sub; }
sub, sup { font-size: 0.8em; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ddd; padding: 0.3em 1em; }
td p { margin: 0; }
ul { list-style: disc; padding-left: 1.5em; }


/* Colors
==================================================*/
.advanced-topics { --accent: var(--advanced-topics); }
.public-key-cryptography { --accent: var(--public-key-cryptography); }
.hashing { --accent: var(--hashing); }
.symmetric-key-encryption { --accent: var(--symmetric-key-encryption); }
.pseudorandomness { --accent: var(--pseudorandomness); }
.unconditional-cryptography { --accent: var(--unconditional-cryptography); }


/* Content
==================================================*/

.fig { vertical-align: middle; }

/* Asides */
.aside-anchor { color: var(--accent); }
.aside-margin { font-size: 1rem; line-height: 1.375; }
.aside-margin i { color: var(--accent); }
.aside-margin-content { border-top: 2px solid var(--accent); padding-top: 0.5rem; position: absolute; }
.aside-margin-header { font-weight: 500; margin-bottom: 0.5em; text-transform: uppercase; }
.chapter-primary > .aside-margin { grid-column: 13 / -1; }

/* Buttons */
.btn { padding: 0.4rem 1.4rem; margin-bottom: 1rem;}
.btn-link { color: var(--primary); }
.btn-outline-primary { border-color: var(--accent); color: var(--accent); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); text-decoration: none !important; }

/* Chapters */
.chapter-content {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: var(--grid);
    margin: 0 auto;
    max-width: var(--page-width);
    position: relative;
}

.chapter-content h2 { color: var(--accent); margin-top: 0; }
.chapter-primary { display: grid; grid-column: 5 / -1; grid-column-gap: 20px; grid-template-columns: var(--subgrid); }
.chapter-primary > * { grid-column: 2 / -5; }

.chapter-secondary {
    font-size: 1rem;
    grid-column: 1 / span 4;
    line-height: 1.375;
    overflow: auto;
    position: sticky;
    top: 1rem;
    z-index: 10;
}

/* theorem */
.theoremlike { background: rgba(0, 0, 0, 0.03); border-radius: 3px; margin-bottom: 1.875rem; padding: 1.5rem 1.875rem; max-width: 100%; }
.theoremlike-header, .proof-header { font-weight: 500; margin-bottom: 0.75rem; text-transform: uppercase; }
.theoremlike-header i { color: var(--accent); margin-right: 0.1rem; }
.theoremlike-header a { text-decoration: none; }

.theoremlike.hint { font-style: italic; }

.hint.accordion-button, 
.hint.accordion-button:not(.collapsed) {
    color: white;
    background-color: var(--accent);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
    width: auto;
    margin-left: auto;
}
.hint.accordion-button:not(.collapsed) {
    margin-bottom: -0.5rem;
}
.hint.accordion-button:not(.collapsed)::before {
    content: "Hide hint";
}
.hint.accordion-button.collapsed::before {
    content: "Show hint";
}
.hint.accordion-button::after {
    margin-left: 1rem;
    content: "▶";
    background: none;
    width: auto;
    height: auto;
}
.hint.accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

.proof p:last-child, .proof .theoremlike:last-child { margin-bottom: 0; }
.proof::after {
  content: "▣";
  text-align: right;
  display: block;
  margin-bottom: 1.875rem;
}

.constructionbox { text-align: center; }

.verbatim {
    white-space: pre;
    font-family: "ibm plex mono", monospace;
    overflow-x: scroll;
}

/* Carousels */
.carousel { background: #fff; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 3px; margin-bottom: 1.5rem; }
.carousel-caption { color: inherit; padding: 1.25rem 2.1rem; position: static; text-align: left; }
.carousel-control-next, .carousel-control-prev { color: var(--accent); width: 2rem; }
.carousel-control-next-icon, .carousel-control-prev-icon { filter: invert(100%); }

.carousel-indicators [data-bs-target] {
    background: #000;
    border: 0;
    border-radius: 100%;
    height: 10px;
    opacity: 0.2;
    width: 10px;
}

.carousel-indicators .active { opacity: 1; }



/* Columns */
[class *= "cols"] { column-gap: 4rem; margin-left: 0; }
[class *= "cols"] li { break-inside: avoid; margin-bottom: 0; }
.cols2 { columns: 2; }
.cols3 { columns: 3; }
.cols4 { columns: 4; }
.cols6 { columns: 6; }

/* Cover */
.cover { background: var(--accent); color: #fff; line-height: 1.3; position: relative; }
.cover-overlay { font-size: 1.758rem; }
.cover-overlay .btn { font-size: 1.21rem; }
.cover-overlay h1 { font-size: 5.625rem; line-height: 1; margin-bottom: 1rem; }
.cover-overlay p { margin-bottom: 0.5em; }
.cover-author { opacity: 0.7; }
.cover-info { 
    font-size: 1.125rem; line-height: 1.777;
}
.cover-info a {
    color: #fff;
}

.cover-bg {
    background-image: url(../images/cover.svg);
    background-position: calc((61% + (var(--page-width) / 2)) - (var(--page-width) * 0.35)) 20%;
    background-repeat: no-repeat;
    background-size: 44%;
    left: 0;
    height: 100%;
    opacity: 0.15;
    position: absolute;
    top: 0;
    width: 100%;
}

.cover-content { margin: 0 auto; max-width: var(--page-width); position: relative; }
.cover-nav { margin-top: 2rem; }
.cover-nav .btn { margin-right: 1rem; }
.cover-nav .btn:hover { opacity: 0.7; }
.cover-overlay { padding-right: 50%; }

/* Dialogue */
.dialogue td, .dialogue th{ 
    border: 0px;
    padding: 0.5rem 0px;
}
.dialogue th {
    text-align: right;
    font-variant: small-caps;
    padding-right: 0.5rem;
}
.dialogue .salviati {
    font-style: italic;
}

/* Exercises */
/*
.exercises { grid-column: 1 / -1; list-style: none; padding: 0; }
.exercises > li { column-gap: 20px; display: grid; grid-template-columns: var(--subgrid); margin-bottom: 2rem; }
.exercises .difficulty { color: var(--accent); float: left; margin-right: 0.2em; }
.exercises-copy { grid-column: 2 / -5; }
.exercises-num { grid-column: 1; text-align: right; }
.exercises-num i { color: var(--accent); }

    .exercises-head { border-top: 2px solid var(--accent); margin-bottom: 2rem; padding-top: 1.5rem; }
    .exercises-head .difficulty { color: #000; font-size: 1rem; font-weight: normal; grid-column: 9 / -5; text-align: right; }
    .exercises-head .section-head-title { grid-column: 2 / span 7; }
    
    .exercises-hint { font-size: 1rem; grid-column: 13 / -1; line-height: 1.375; }
    .exercises-hint a { color: #000; text-decoration: none; }
    .exercises-hint a:hover { text-decoration: underline; }
    .exercises-hint i { color: var(--accent); }
    .hint-content { display: none; }
    .hint-content.open { display: block; }
*/

/* Features */
.feature { display: grid; gap: 20px; grid-template-columns: var(--grid); }
.feature-content { grid-column: 6 / -5; }
.feature-content.wide { grid-column: 6 / -1; }
.feature-header { font-size: 1rem; grid-column: 1 / span 5; line-height: 1.375; }
.feature-header h2 { font-size: 2.125rem; margin-top: 0; }

/* Footer */
.footer {
    --accent: #fff;
    background: #383838;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.375;
    padding: var(--vspace) var(--hspace);
}

.footer a { color: #fff; }
.footer h6 { color: var(--accent); font-size: 1.125rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.footer-about { grid-column: 1 / span 5; }
.footer-about .brand { font-size: 1.25rem; font-weight: bold; text-transform: none; }
.footer-about ul { list-style: none; padding: 0; }
.footer-content { margin: 0 auto; max-width: var(--page-width); }
.footer-nav { display: grid; gap: 20px; grid-template-columns: var(--grid); margin-bottom: var(--vspace); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-nav .outline { grid-column: 6 / -1; }
.footer-nav .outline a { color: #fff; }
.footer-nav .outline ol li { font-size: 1.2rem; margin-bottom: 0.25rem; }
.footer-nav ul { margin-bottom: 2rem; }
.updated { opacity: 0.7; }

    /* Colophon */
    .colophon { display: flex; justify-content: space-between; opacity: 0.3; }

/* Footnotes */
.footnotes { font-size: 1rem; opacity: 0.7; }

/* Header */
.header {
    background: #fff;
    box-shadow:
        0px 0.8px 0.6px rgba(0, 0, 0, 0.006),
        0px 1.9px 1.3px rgba(0, 0, 0, 0.008),
        0px 3.6px 2.5px rgba(0, 0, 0, 0.01),
        0px 6.5px 4.5px rgba(0, 0, 0, 0.012),
        0px 12.1px 8.4px rgba(0, 0, 0, 0.014),
        0px 29px 20px rgba(0, 0, 0, 0.02)
    ;
    padding: 0.5rem var(--hspace);
    position: relative;
}

.header a { text-decoration: none; }

.header-content {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: var(--page-width);
    justify-content: space-between;
}

    /* Logo */
    .logo { align-items: center; display: flex; font-size: 1.25rem; font-weight: bold; }
    .logo { color: #000; }
    .logo img { margin-right: 0.5em; }
    
    /* Menu */
    .menu { align-items: center; display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; text-transform: uppercase; }
    .menu a { color: #000; }
    .menu .dropdown { position: static; }
    
    .menu #search {
        text-transform: none;
    }
    .menu .dropdown-menu {
        border: 0;
        border-radius: 0;
        box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
        left: 0;
        padding: 1em var(--hspace);
        position: absolute;
        top: 100%;
        width: 100%;
    }
    
    .menu .dropdown-toggle::after { display: none; }
    .menu > li { margin: 0; }
    .menu.open { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); display: block; flex-direction: column; z-index: 100; }
    .menu-toggle { display: none; }
    
        /* Search */
        .search-bton { flex: 0 0 auto; width: 4rem; }
        
        .search-btn button {
            -webkit-appearance: none;
            background: none;
            border: 0;
            display: block;
            font-size: 1em;
            padding: 0 1rem;
        }
        
        .search-content { margin: 0 auto; max-width: var(--page-width); }
        .search-form { border: 1px solid #ddd; display: flex; font-size: 2rem; }
        .search-txt { flex: 1 1 auto; padding-left: 0.3em; }
        .search-txt input { border: 0; display: block; flex: 1 1 auto; padding-left: 0.3em; width: 100%; }
        .search-txt input::placeholder { color: rgba(0, 0, 0, 0.3); font-style: italic; }
        
        /* Theme toggle */
        .theme-toggle { align-items: center; display: flex; }
        .theme-toggle .form-check { min-height: 0; }
        .theme-toggle .form-switch { margin: 0 0.4rem; padding: 0; }
        .theme-toggle .form-switch .form-check-input { margin: 0; }
        
        /* Topics */
        .topics-contents { margin: 0 auto; max-width: var(--page-width); padding: 2em 0; }

/* Hidden */
/* .hidden { display: none; }
*/

/* Intro */
.intro { font-size: 1.758rem; line-height: 1.2; }

/* Key points */
.key-points { border: 2px solid var(--accent); border-radius: 3px; margin-bottom: 2rem; margin-top: 2rem; padding: 2rem; }
.key-points h3 i { color: var(--accent); }

/* Lists */
.lower-alpha { list-style: lower-alpha; }
.upper-alpha { list-style: upper-alpha; }
    
    /* Plain (no bullets) */
    .plain-list { list-style: none; padding: 0; }
    .plain-list a { text-decoration: none; }
    .plain-list a:hover { text-decoration: underline; }

/* Locked */
.locked { overflow: hidden; }


/* math */
.katex {
/*    --katex-scale: 1.08em;
    --katex-inv-scale: 0.926em;  */

/*
    font-family: "libertine";
    --katex-scale: 1.12em;
    --katex-inv-scale: 0.893em;  
*/

    font-size: var(--katex-scale);
    text-transform: none; /* in case it's in a theoremlike title etc */
}

/*.katex .mathnormal {
    font-family: "libertine";
} */
.katex .texttt {
    font-family: "ibm plex mono", monospace;
    font-size: var(--katex-inv-scale);
}
.katex .textsf {
    font-family: "ibm plex sans";
    font-size: var(--katex-inv-scale);
}
.katex .textsc, .katex .textit {
    font-family: "ibm plex serif";
    font-size: var(--katex-inv-scale);
}
.mathbyte {
	background: #eee;
	border: 1px solid #ccc;
	padding: 1px;
}
div.math {
    margin: -0.61rem auto 0.61rem auto;
    text-align: center;
    overflow-x: scroll;
}

.nobreak {
    white-space: nowrap;
}


/* bib */
table.bib td {
    border: 0px;
}

/* Main area */
.main { background: #fff; }
.main-content { margin: 0 auto; max-width: var(--page-width); }

/* Modals */
.modal-title { font-weight: bold; }

/* Outlines */
.outline { display: grid; gap: 20px; grid-auto-flow: column; list-style: none; padding: 0; }
.outline a { color: #000; text-decoration: none; }
.outline a:hover { text-decoration: underline; }
.outline-head { color: var(--accent); font-weight: 500; margin: 0 0 0.5em; text-transform: uppercase; }

    /* Columns */
    .outline-2cols { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(40px, auto)); }
    .outline-3cols { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(40px, auto)); }
    
    /* Featured */
    .outline-feature ol { font-size: 1.5625rem; line-height: 1.32; }
    .outline-feature ol li { margin-bottom: 0.25em; }

/* Page navigation */
.pagenav a:hover { text-decoration: underline; }
.pagenav .close { display: none; float: right; margin-left: 1rem; padding: 0.5rem 1rem; }
.pagenav ol { list-style: none; padding-left: 0; }
.pagenav ol a { color: #000; display: flex; text-decoration: none; }
.pagenav ol ol { margin-left: 1em; }
.pagenav-num { flex: 0 0 auto; margin-right: 0.5rem; text-align: right; width: 3.5rem; }
.pagenav-title { flex: 1 1 auto; }
.pagenav-toggle { display: none; }

    /* Paging */
    .pagenav .paging { display: block; }
    .pagenav .paging a { display: block; }
    .pagenav .paging li { margin-bottom: 1rem; }
    .pagenav .paging-title { font-size: 1rem; }

/* Paging */
.paging { border-top: 1px solid #ddd; display: grid; gap: 20px; grid-template-columns: 1fr 1fr; list-style: none; padding: 1rem 0 0; }
.paging a { color: #000; text-decoration: none; }
.paging-head { color: var(--accent); display: block; font-weight: 500; text-transform: uppercase; }
.paging-title { display: block; font-size: 1.758rem; line-height: 1.278; }

/* Popovers */
.popover { font-size: 1rem; line-height: 1.375; }

/* Quizzes */
.quiz-answers { list-style: none; padding: 0; }
.quiz-answers-icon { flex: 0 0 auto; margin-right: 1rem; text-align: right; width: 2rem; }
.quiz-answers-icon .correct { color: var(--correct); }
.quiz-answers-icon .incorrect { color: var(--incorrect); }

.quiz-answers-item {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    display: flex;
    margin-bottom: 0.2rem;
    padding: 0.4rem 1rem;
}

.quiz-answers-item:hover:not(.correct, .incorrect) { background: rgba(0, 0, 0, 0.1); cursor: pointer; }
.quiz-answers-item.correct { background: var(--correct-screen); border-color: var(--correct); }
.quiz-answers-item.incorrect { background: var(--incorrect-screen); border-color: var(--incorrect); }
.quiz-answers-value { flex: 1 1 auto; }

/* Scrollable boxes (horizontally) */
.scrollbox { position: relative; }
    
.scrollbox:after, .scrollbox:before {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 1em;
    z-index: 1;
}

.scrollbox.bottom:after, .scrollbox.middle:after {
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e000000', endColorstr='#000000',GradientType=1 );
    right: 0;
}

.scrollbox.top:after, .scrollbox.middle:before {
    background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2e000000',GradientType=1 );
    left: 0;
}

/* Sections */
.section-bordered { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.section-head { display: grid; gap: 20px; grid-column: 1 / -1; grid-template-columns: var(--subgrid); position: relative; }
.section-head-num { grid-column: 1; text-align: right; }
.section-head-title { grid-column: 2 / -5; }
.section-shaded { background: #f0f0f0; margin-bottom: 1px; }

/* Smallcaps */
.subname, .textsc { 
    font-style: normal; 
    font-variant: small-caps; 
    font-family: "ibm plex serif";
}

.extag { 
    font-family: "ibm plex serif"; font-variant: small-caps; 
    background: var(--accent);
    color: white;
    padding: 0 4pt;
    border-radius: 4pt;
}
        

/* Subheaders */
.subheader { background: var(--accent); color: #fff; position: relative; }

.subheader-bg {
    background-position: calc((50% - (var(--page-width) / 2)) + (var(--page-width) * 0.15)) 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    left: 0;
    height: 100%;
    opacity: 0.15;
    position: absolute;
    top: 0;
    width: 100%;
}

.subheader-content { margin: 0 auto; max-width: var(--page-width); position: relative; }
.subheader-gallery > div { margin-bottom: 1rem; }
.subheader h1 { margin: 0; }
.subtitle { text-transform: uppercase; }

    /* Chapters */
    .chapter-num { grid-column: 1 / span 4; font-size: 8.125rem; font-weight: bold; line-height: 1; text-align: center; }
    
    .chapter-subheader .subheader-content {
        align-items: center;
        display: grid;
        gap: 20px;
        grid-template-columns: var(--grid);
    }
    
    .chapter-titles { grid-column: 6 / -1; }
    .chapter-titles h1 { margin: 0; }
    
    /* Images */
    .unconditional-cryptography .subheader-bg { background-image: url(../images/unconditional-cryptography.svg); }
    .pseudorandomness .subheader-bg { background-image: url(../images/pseudorandomness.svg); }
    .symmetric-key-encryption .subheader-bg { background-image: url(../images/symmetric-key-encryption.svg); }
    .hashing .subheader-bg { background-image: url(../images/hashing.svg); }
    .public-key-cryptography .subheader-bg { background-image: url(../images/public-key-cryptography.svg); }
    .advanced-topics .subheader-bg { background-image: url(../images/advanced-topics.svg); }
    .appendix .subheader-bg { background-image: url(../images/appendix.svg); }
    
    .app-a-math-refresher .subheader-bg {
        background-image: url(../images/app-a-math-refresher.svg);
        opacity: 0.2;
    }
    
    .app-b-index-security-definitions .subheader-bg {
        background-image: url(../images/app-b-index-security-definitions.svg);
        opacity: 0.2;
    }
    
    .app-c-index-abbreviations .subheader-bg {
        background-image: url(../images/app-c-index-abbreviations.svg);
        opacity: 0.2;
    }


/* Breakpoints
==================================================*/
@media screen and (max-width: 1200px) {
    /* Asides */
    .aside-margin-content { margin: 1.5rem 0; position: static; }
    .chapter-primary > .aside-margin { grid-column: 2 / -5; }
}

@media screen and (max-width: 900px) {
    /* Basics */
    :root { --hspace: 15px; }
    body { font-size: 1rem; }
    h1 { font-size: 1.429rem; }
    
    /* Content */
        /* Chapters */
        .chapter-body { padding: 0; }
        .chapter-content { display: block; }
        .chapter-primary { display: block; padding: var(--vspace) calc(var(--hspace) * 2); }
        .chapter-secondary { height: auto; top: 0; }
        
        /* Cover */
        .cover { font-size: 1.125rem; }
        .cover .btn { font-size: 1rem; }
        .cover h1 { font-size: 2rem; }
        .cover-overlay { padding: 0; }
        
        /* Exercises */
        .exercises { list-style: decimal; padding-left: 2rem; }
        .exercises > li { display: list-item; }
        .exercises-num { display: none; }

        /* Header */
        .logo { font-size: 0.937rem; }
        .logo img { width: 1.5em; }
        
            /* Menu */
            .menu {
                background: #fff;
                display: none;
                font-size: 1.3rem;
                height: calc(80vh);
                left: 0;
                overflow-y: auto;
                position: absolute;
                top: 100%;
                width: 100%;
            }
            
            .menu a { display: block; padding: 0.5rem 1rem; }
            .menu-contents { padding: 0.5rem 1rem; }
            .menu .dropdown-menu { box-shadow: none; display: block; padding: 0; position: static; }
            .menu .dropdown-toggle { display: inline; padding: 0; }
            .menu > li { border-bottom: 1px solid #ddd; }
            .menu-search { padding: 0.5rem 1rem; }
            .menu-toggle { display: block; }
            
            /* Search */
            .search-form { font-size: 1.5rem; }
            .search-toggle { display: none !important; }
            
            /* Theme toggle */
            .theme-toggle { justify-content: center; padding: 0.5rem 1rem; }
            
            /* Topics */
            .topics-contents { padding: 0; }
        
        /* Features */
        .feature { display: block; }
        
        /* Footer */
        .footer-nav { display: block; }
        .colophon { display: block; }
        
        /* Page navigation */
        .pagenav { background: #fff; box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2); display: none; height: 95vh; padding: 15px; }
        .pagenav.open { display: block; height: 95vh; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; }
        .pagenav .close { display: block; }
        
        .chapter-secondary .menu-toggle {
            background: var(--accent);
            color: #fff;
            display: block;
            margin-bottom: 1rem;
            padding: 0.75rem 1rem;
            text-decoration: none;
        }
        
        .chapter-secondary .menu-toggle:hover { color: #fff; }
        
        /* Outline */
        .outline a { display: inline; padding: 0; }
        .outline-3cols { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(40px, auto)); }
        
        /* Section headers */
        .section-head { display: block; }
        
        /* Subheader */
        .chapter-num { font-size: 4.1rem; }
        .chapter-subheader .subheader-content { align-content: center; display: flex; flex-direction: row-reverse; }
        .chapter-titles { flex: 1 1 auto; }
        .subheader { margin-bottom: 1px; }
        .subheader-bg { background-position: 110% 50%; }
}

@media screen and (max-width: 600px) {
    /* Basics */
    body { line-height: 1.55; }
    
    /* Content */
        /* Chapters */
        .chapter-primary { padding: var(--vspace) var(--hspace); }
        
        /* Callouts */
        .theoremlike {
            padding: 1.1rem var(--hspace) 1.1rem;
            margin-left: calc(var(--hspace) * -1);
            margin-right: calc(var(--hspace) * -1);
            max-width: none;
        }
        
        /* Columns */
        .cols2, .cols3 { columns: 1; }
        
        /* Features */
        .feature-header h2 { font-size: 1.5rem; }
        
        /* Intro */
        .intro { font-size: 1.3rem; }
        
        /* Key points */
        .key-points { padding: 1.1rem var(--hspace) 1.1rem; }
        
        /* Outline */
        .outline { display: block; }
        .outline > li { margin: 1rem 0; }
        .outline-feature ol { font-size: 1.125rem; }
        
        /* Paging */
        .paging { display: block; }
        .paging li { margin-bottom: 2rem; }
}



/* Constructions */
.codebox-construction { 
    background: #fff; 
    border-radius: 3px; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
    margin-bottom: 1.5rem; 
}
.codebox-construction .codebox-container { 
    gap: 2rem; 
    margin: 0;
    padding: 0.5rem 1rem; 
}


.codebox-container {
    margin-bottom: 1.22em;
    text-align: center;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 4px 0; /* make room for highlights */
}
/*
.hybrid-animation .codebox-container {
    text-align: left;
}
*/

.hybrid-animation button {
    background: var(--accent);
    color: white;
    border: 0;
    padding: 0 1rem;
    margin: 0 1rem;
}

.codebox-hl { 
    box-shadow: 0 0 0.4em #ffff5e, 0 0 0.4em #ffff5e, 0 0 0.4em #ffff5e; 
}
.hl { 
    text-shadow: 0 0 0.2em #ffff5e, 0 0 0.2em #ffff5e, 0 0 0.2em #ffff5e; 
}

.codebox.codebox-plain { 
    background: none; 
    border: 0; 
}


.codebox {
  display: inline-block;
  text-align: left;
  padding: 0.4rem;
  vertical-align: middle;
  background: #fff; 
  border-radius: 3px; 
  border: 1px solid rgba(0, 0, 0, 0.4); 
  white-space: nowrap;

  overflow-x: clip;
}

.codebox-bare {
  border: 0px;
  margin 0 1rem;
  background: none;
}
.codebox-hl {
  box-shadow: 0 0 0.4em #ffff5e, 0 0 0.4em #ffff5e, 0 0 0.4em #ffff5e;
}
.codebox + .codebox {
  margin-left: 1rem;
}

.codeboxtitle {
  display: block;
  text-align: center;
  background: rgba(0,0,0,0.1);
  padding: 0.2rem;
  margin: -0.4rem;
  margin-bottom: 0.5rem;
}

/* outside of hybrid animation it's nice to have tall lines */
.hybrid-animation .codeboxtitle {
  max-height: 40px;
  overflow-y: clip;
}
.codeboxtitle.hidden {
    max-height: 0px;
    opacity: 0;
    margin: 0;
    padding: 0;
}







.procheader {
  border-bottom: 1px solid black;
  display: inline-block;
}
.procname {
  font-variant: small-caps;
}



.codeline.indent-1 {
  margin-left: calc(1rem - 0.4rem);
}
.codeline.indent-2 {
  margin-left: calc(2rem - 0.4rem);
}
.codeline.indent-3 {
  margin-left: calc(3rem - 0.4rem);
}
.codeline.indent-4 {
  margin-left: calc(4rem - 0.4rem);
}
.codeline-space {
  height: 0.8rem;
}

.codecomment {
  color: gray;
  font-style: italic; 
  font-size: 0.9em;
}

.procheader, .codeline, .codeline-empty, .slide, .codeboxtitle {
    transition: all ease-in-out 1s;
}
.codeline-empty {
    height: 10px;
}

.codeline {
    padding-left: 200px;
    width: 100%;
    padding: 0 0.4rem; /* expand to take over parent's margins */
    margin: 0 -0.4rem;
}
/* outside of hybrid animations, it's nice to have tall lines */
.hybrid-animation .codeline {
    max-height: 35px; /* overestimate */
}

.procheader.hidden, .codeline.hidden {
    transform: translate(100%,0px);
    max-height: 0px;
    opacity: 0;
}
.codeboxtitle.hl, .codecomment {
    text-shadow: none;
}

.codeline-empty.hidden {
    height: 0px;
}

.slidegroup-outer {
    overflow-y: visible; /* don't clip 3d effect */
    overflow-x: clip;
    display: inline-block;
/*             vertical-align: middle; */
    text-align: left;
}
.slidegroup-inner {
    display: grid;
    overflow-y: visible; /* don't clip 3d effect */
}

.slide {
    grid-row: 1;
    grid-column: 1;
    margin: auto 0; /* to make secondary libraries vertically centered */
}

.slidegroup-outer.libraries {
    display: inline-block;
    overflow-x: clip;
    vertical-align: middle;
    margin: auto 0; /* all drawers within drawerstack vert-align middle */
    overflow-y: visible; /* don't clip 3d effect */
}

.slide {
    overflow-y: visible; /* don't clip 3d effect */
}
.slide.slide-left {
    transform: translate(-100%,0px);
    opacity: 0;
}
.slide.slide-right {
    transform: translate(100%,0px);
    opacity: 0;
}


/* this is for titles of codeboxes */
.disappearing {
    max-height: 30px;
    transition: all ease-in-out 1s;
    overflow-x: clip;
}
.disappearing.gone {
    max-height: 0px;
    opacity: 0;
    margin-bottom: 0px !important;
}


/**************/


.flip-outer {
    display: inline-block;
    perspective: 1200px;
    vertical-align: middle;
    overflow-y: visible; /* don't clip 3d effect */
}
.flip-inner {
    transition: transform ease-in-out 1s;
    transform-style: preserve-3d;
    display: grid;
}

.flip-outer.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-inner .front, .flip-inner .back {
    grid-row: 1;
    grid-column: 1;
    backface-visibility: hidden;
    margin: auto 0; /* vertically center */
    transition: opacity ease 0.1s 0.45s;
}
.flip-inner .back {
    transform: rotateY(180deg);
    opacity: 0;
}
.flip-outer.flipped .back {
    opacity: 1;
}
.flip-outer.flipped .front {
    opacity: 0;
}

.captions {
    display: grid;
    /* `clip` doesn't work in safari, so captions sit atop control buttons */
    /* but `hiddden' doesn't work for other things :shrug: */
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.caption {
    grid-row: 1;
    grid-column: 1;
    transition: all ease-in-out 0.5s 0.25s;
    margin: auto 0;
}
.caption.hidden {
    opacity: 0;
}
.hybrid-animation button, .hybrid-animation .framenumber {
    margin: 0 0.4rem;
}
.caption.slide-up {
    transform: translate(0px,100%);
    opacity: 0;
}
.caption.slide-down {
    transform: translate(0px,-100%);
    opacity: 0;
}