:root {height:100%;
  --color-light-shade:#faf9fa;
  --color-dark-accent:#8d7f87; --color-dark-shade:#252d42;
--color-task:#66df7c; --color-task-light:#d3f6da;
/*--color-core:#8cc1ff; */
--color-core:#1565C0; --color-core-light:#ededff;
--color-alarm:#d32f2f; --color-alarm-light:#fbdedd;
--color-wisdom:#f1d958; --color-wisdom-light:#f8edb1;
--color-meta:#913fc4; --color-meta-light:#f6e8ff;
--color-secret:#2196F3; --color-secret-light:#C1DFFF;
/*--color-secret:#d89fff; --color-secret-light:#f7ecff; */
--color-nav0:#011F5B; --color-nav1:#112F6B; --color-nav2:#213F7B; --color-nav3:#314F8B; --color-nav4:#415F9B;
--color-nav5:#516FAB; --color-nav6:#617FBB; --color-nav7:#718FCB; --color-nav8:#819FDB; --color-nav9:#91AFEB;
--color-navA:#A1BFFB; --color-navB:#B1CFFF; --color-navC:#C1DFFF;
--color-heading-bg:#d32f2f;
--top-clearance:28px; --nav-width:225px; --nav-hide:-225px;
--main-max-width:960px;
--shout-lr-padding:1em; --shout-child-indent:1em; --minimal-padding:5px;
--standard-shadow:var(--minimal-padding) var(--minimal-padding) var(--minimal-padding) var(--color-dark-accent); --standard-margin:1em;
--serif-font: 'Merriweather', serif; --sans-font: 'Lato', sans-serif;
height:100%; /*overflow:hidden;*/}

[contenteditable] {outline: 0px solid transparent;}
.shout.edit > .shout_title {display:none;}
.shout.edit > .shout_content {padding:0px; border:none; box-shadow:unset; background-color:transparent;}
.shout.edit > .shout_content > .loose_content {margin:0px;}
.shout.edit img {max-width:275px; max-height:500px;}
.shout.edit {padding:0px;}
.shout.highlight > .shout_title {display:none;}
.shout.highlight > .shout_content {padding:0px 1em; border:none; box-shadow:unset; background-color:var(--color-wisdom-light);}

body{margin:0px; height:100%; container-type:inline-size;}

.document {position:relative; color:var(--color-dark-shade); background-color:var(--color-dark-shade); margin:0px;}
footer {color:var(--color-light-shade); background-color:var(--color-core); text-align:center; padding:var(--standard-margin);}
main {background-color:var(--color-light-shade); padding: var(--minimal-padding);
font-family: var(--sans-font); font-size:16px;}
main .loose_content {line-height:150%;}

.document .top_menu {flex:0 0 var(--top-clearance); width:100%;
  color:var(--color-light-shade); background-color:var(--color-nav0);
  display:flex; height:var(--top-clearance); z-index:2; justify-content:space-between;
}
.document .top_menu svg {color:var(--color-light-shade);}

.document {height:100%;display:flex;flex-direction:column;overflow:hidden;}
.mainscroll {overflow:auto;}

.mainscroll, .top_menu, footer {max-width:var(--main-max-width);}


img {max-width:95%; max-height:40%; object-fit:contain;}
iframe {width:95%; height:40%; object-fit:contain;}
ul {padding-inline-start:1.5em;}
ol {padding-inline-start:1.5em;}

.glue {white-space:nowrap;}

.bolditalic {font-weight:bold; font-style:italic;}

h1, h2, h3, h4, h5, h6, figcaption, nav, footer, .shout_title {font-family: var(--serif-font);}
main .tag {font-family: var(--serif-font); color:var(--color-alarm); font-weight:bold;}
h1, h2, h3, h4, h5, h6 {color:var(--color-dark-shade); font-weight:normal; margin:24px 0px; }
h1 mjx-container {font-size:120% !important;}
h2 mjx-container {font-size:120% !important;}
h3 mjx-container {font-size:120% !important;}
h4 mjx-container {font-size:120% !important;}
h5 mjx-container {font-size:120% !important;}
h6 mjx-container {font-size:120% !important;}
h1 {font-size:32px; text-align:center; font-weight:bold; color:var(--color-light-shade); background-color:var(--color-heading-bg); margin:0.5em 0em; padding:0.5em 0.25em;}
h2 {font-size:28px; }
h3 {font-size:24px;  }
h4 {font-size:20px;  }
h5, h6 {font-size:18px;}
.document .toplink {font-family: var(--serif-font); font-weight:bold; text-align:center; font-size:3em; padding:1.1em; background-image:url('background.jpg'); background-size:100%; color:var(--color-light-shade);}
.toplink a { color:inherit;}
.toplink a:visited { color:inherit;}
.toplink mjx-container {font-size:120% !important;}

td.rulebelow {border-bottom: 1px solid black;}
td.ruleabove {border-top: 1px solid black;}
table {border-collapse:collapse; margin: var(--standard-margin) auto;}
td {text-align:center; box-sizing:border-box;padding:0px 0.5em;}
td.table_left {text-align:left;}
td.table_right {text-align:right;}
td {border-left: 1px solid black; border-right:1px solid black;}
td {min-width:5vw;}

div.math_line , div.math_environment  {
  align-items:baseline;
  display:flex; flex-direction:row; flex-grow: 1;}
div.math_vertical {
  display:flex; flex-direction:column; flex-grow: 1;}
div.math_spacer {flex-grow:1;}
div.math_limited {width:min-content;}
div.math_limited mjx-container {margin:0.5em 0px !important;}
/*div.equation_number{margin-top:auto; margin-bottom:0.5em;}*/

div.math_environment {container-type:inline-size;}
figure {text-align:center;}

main .boxes {width:100%; gap:var(--minimal-padding); justify-content:space-between; align-items:stretch; margin-left:auto; margin-right:auto; display:flex;flex-direction:row; flex-wrap:wrap; margin-top:var(--standard-margin); margin-bottom:var(--standard-margin);}
main .boxes > div {width:275px; flex-grow:1; margin-top:0px; margin-bottom:0em;}
main .boxes > div.shout {display:flex; flex-direction:column;}
main .boxes > div.shout > .shout_content {flex-grow:1;}
main .boxes > div.shout > div.shout {margin-left:0px; margin-bottom:0px;}

a {text-decoration: none;}
main a {color:var(--color-nav6);}
main a:visited {color:var(--color-nav5);}
main .inset {background-color:var(--color-wisdom); margin:0.5em 0em; padding: 0em var(--standard-margin); border-radius:0.25em;}
main .math_display {margin:0.5em 0em;}
main .math_environment {margin:0.5em 0em;}
main .list {margin:0.5em 0em;}
main .visiblebreak {display:block; content:""; height:0.7em;}
main .hardbreak {display:none;}
.nav_content > .loose_content {font-size:175%;}
.nav_content .actionbutton {margin:var(--shout-lr-padding);}

div .skip {height:4em;}

nav {position:absolute; top:var(--top-clearance); left:0px; z-index:2; margin:0px; background-color:var(--color-nav0); font-family: var(--sans-font);}
.nav_content {position:fixed; width:var(--nav-width); height:calc(100% - var(--top-clearance));padding:0.25em;
  background-color:var(--color-nav0); color:var(--color-light-shade);
  box-sizing:border-box;overflow:hidden; visibility:hidden;
}
.nav_content .level1 {background-color: var(--color-nav1);}
.nav_content .level2 {background-color: var(--color-nav2);}
.nav_content .level3 {background-color: var(--color-nav3);}
.nav_content .level4 {background-color: var(--color-nav4);}
.nav_content .level5 {background-color: var(--color-nav5);}
.nav_content .level6 {background-color: var(--color-nav6);}
.nav_content .level7 {background-color: var(--color-nav7);}
.subnavigation {border:2px solid var(--color-wisdom);}
nav a {display:none;}
nav .tree {padding-left:0.25em;}
nav a.link {display:block; color:inherit; padding:0.25em}
nav a:visited {color:inherit;}
main figure a {vertical-align:top;}
main .equation_number {font-family: 'MJXZERO','MJXTEX', serif; font-size:18px;}
main .gap {float:right; font-size:0.6em;}
nav .gap {display:none;}
main .code {background-color:var(--color-task); border-radius:0.25em; padding:0em 0.3em;}

nav a {width:100%;box-sizing:border-box; padding:0.25em var(--standard-margin) 0.25em 0.5em;}
nav a.level0 {font-size:150%;}
nav a.level1 {padding-left:0.4em; color:var(--color-light-shade);}
nav a.level2 {padding-left:0.8em; font-size: 14px;}
nav a.level3 {padding-left:1.2em; font-size: 12px;}
nav a.level4 {padding-left:1.6em; font-size: 11px;}
nav a.level5 {padding-left:2.0em; font-size: 11px;}
nav a.level6 {padding-left:2.4em; font-size: 10px;}
nav a.level7 {padding-left:2.8em; font-size: 10px;}


/* Open/Close Transitions */
.shout_content {overflow:hidden; opacity:1; transition: max-height 0.6s linear;}
.shout_content.closed {max-height:0 !important; overflow:hidden; opacity:0; transition: max-height 0.6s linear, opacity 0.6s linear 0.4s;}
.shout_title.closed {border-bottom-left-radius:0.25em; border-bottom-right-radius:0.25em;}

/*
.nav_content {height:0; transition: height 0.6s linear;}
.nav_content.open {height:calc(100% - var(--top-clearance)); transition: height 0.6s linear, overflow-y 0.1s linear 1s;} */
.nav_content {left:var(--nav-hide); transition: left 0.4s linear;}
#output .nav_content {left:0;}
.nav_content.open {left:0; transition: left 0.4s linear, overflow-y 0.1s linear 1s;}
.nav_content.open.static {overflow-y:auto;}
.nav_content.open, .nav_content.active {visibility:inherit;}
/* Begin Normal Formatting Details*/

.shout {margin:var(--standard-margin) 0em;}

.shout_title {
  break-after:avoid;
  background-color:var(--color-core);
  /* display:flex; flex-direction:row; justify-content:flex-start; align-items:center; */
  box-sizing:border-box; width:fit-content;
  padding:0.25em var(--standard-margin); margin-bottom:0.1em;
  border-radius:0.25em; border-bottom-left-radius: 0; border-bottom-right-radius:0;
  border-width:1px; border-style: solid; box-shadow:var(--standard-shadow);
  border-color: var(--color-dark-shade);
  color:var(--color-light-shade);
  font-weight:bold;
}
.shout_content {
  break-before:avoid;
  background-color:var(--color-core-light);
  box-sizing:border-box;
  padding: 0em var(--shout-lr-padding);
  border-radius:0.25em; border-top-left-radius:0; border-width:1px; border-style:solid;
  box-shadow: var(--standard-shadow);
}

.icon {margin-left:-0.5em;}
.icon svg {transform: scale(0.9); vertical-align:text-top;}

.shout > .shout {margin-left:var(--shout-child-indent); margin-top:var(--minimal-padding); margin-bottom:0em;}
.shout_content .shout {margin-top:0.75em; margin-bottom:0.75em;}

.shout_content .loose_content:last-child {margin-bottom:var(--standard-margin);}
.shout_content .loose_content:first-child {margin-top:var(--standard-margin);}

.shout.proof > .shout_title {background-color:var(--color-secret);}
.shout.proof > .shout_content {background-color:var(--color-secret-light);}
.shout.answer > .shout_title {background-color:var(--color-secret);}
.shout.answer > .shout_content {background-color:var(--color-secret-light);}
.shout.hint > .shout_title {background-color:var(--color-secret);}
.shout.hint > .shout_content {background-color:var(--color-secret-light);}

.shout.meta > .shout_title {background-color:var(--color-meta);}
.shout.meta > .shout_content {background-color:var(--color-meta-light);}
.shout.note > .shout_title { background-color:var(--color-wisdom); color:var(--color-dark-shade);}
.shout.note > .shout_content {background-color:var(--color-wisdom-light);}

.shout.important > .shout_title {background-color:var(--color-alarm);}
.shout.important > .shout_content {background-color:var(--color-alarm-light);}
.shout.warning > .shout_title {background-color:var(--color-alarm);}
.shout.warning > .shout_content {background-color:var(--color-alarm-light);}
.shout.danger > .shout_title {background-color:var(--color-alarm);}
.shout.danger > .shout_content {background-color:var(--color-alarm-light);}
.shout.stop > .shout_title {background-color:var(--color-alarm);}
.shout.stop > .shout_content {background-color:var(--color-alarm-light);}

.shout.exercise > .shout_title {background-color:var(--color-task); color:var(--color-dark-shade);}
.shout.exercise > .shout_content {background-color:var(--color-task-light);}
.shout.exercises > .shout_title {background-color:var(--color-task); color:var(--color-dark-shade);}
.shout.exercises > .shout_content {background-color:var(--color-task-light);}
.shout.question > .shout_title {background-color:var(--color-task); color:var(--color-dark-shade);}
.shout.question > .shout_content {background-color:var(--color-task-light);}
.shout.questions > .shout_title {background-color:var(--color-task); color:var(--color-dark-shade);}
.shout.questions > .shout_content {background-color:var(--color-task-light);}
.shout.review > .shout_title {background-color:var(--color-task); color:var(--color-dark-shade);}
.shout.review > .shout_content {background-color:var(--color-task-light);}

@container (min-width:960px) {
  .document {display:block; overflow:auto;}
  .document .top_menu {display: none;}
  .document .nav_content {visibility: visible; height:100%; left:0px; position:relative;}
  .document nav {position:fixed;height:100%;top:0px;}
  .document .mainscroll {margin-left:var(--nav-width); overflow:hidden;height:fit-content;}
}

@container (max-width:450px) {
  .shout_content {padding: 0em var(--minimal-padding);}
  .shout > .shout {margin-left:0px;}
}

@container (max-width:360px) {
  .document main {font-size:14px;} /* Need to resize a bunch of other things, too */
  main .equation_number{font-size:16px;}
  h1 {font-size:28px;} h2 {font-size:24px;} h3 {font-size:20px;} h4 {font-size:18px;} h5, h6 {font-size:16px;}
  .document .toplink {font-size:28px;}
}

@media print {
  /* .document .toplink {font-size:200%; padding-top:0.5em; padding-bottom:0.5em; print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;} */
  /* .document .toplink {display:none;} */
  .document .toplink {font-size:2em; color:black; background-image:none; background-color:white; padding:1px;}
  .document {background-color: white;}
  footer {display:none;} main {font-size:14px;} body {height:unset;}
  h1 {print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important;}
  .document {display:block; overflow:none; height:fit-content;}
  .document .top_menu {display: none;}
  .document nav {display:none;}
  .document .mainscroll{margin:0px; width:100%; height:fit-content;}
  figure {break-inside:avoid;}
  .math_environment {break-inside:avoid;}
  .shout_title {padding: 0em 1em;}
  /* li {break-inside:avoid;} */
  .shout_content.closed {height:fit-content; max-height:unset !important; opacity:1;}
  .shout_title, .toplink, .note, .meta, .important, .warning, .danger, .stop {-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
  h1,h2,h3 {break-after:avoid;}
  :root {--shout-lr-padding:var(--minimal-padding); --shout-child-indent:0px; --minimal-padding:2px; --standard-margin:0.75em;}
  .shout > .shout {margin-top:0.25em;}
  .shout > .shout_content {box-shadow:unset;}
  .shout > .shout_title {box-shadow:unset;}
}

main .tree.level0 > .loose_content {font-size:36px; font-family: var(--serif-font); margin-top:var(--standard-margin);}
main .tree.level1 > .loose_content {font-size:32px; font-family: var(--serif-font); margin-top:var(--standard-margin);}
main .tree.level2 > .loose_content {font-size:28px; font-family: var(--serif-font); margin-top:var(--standard-margin);}
main .tree > .tree {margin-left:var(--standard-margin);}
main .tree a {color:var(--color-nav2);}
main .tree a:visited {color:var(--color-nav1);}

:root {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  main {background-color:var(--color-dark-shade); color:var(--color-light-shade);}
  main .inset {background-color:var(--color-wisdom-light);}
  h2, h3, h4, h5, h6 {color:var(--color-light-shade);}
:root {
  --color-heading-bg:#9a1515; --color-light-shade:#e7e7e7;
  --color-core-light:#424259; --color-task-light:#23482a;
  --color-secret-light:#565674; --color-meta-light:#42314d;
  --color-dark-accent:#594444; --color-alarm-light:#6f1814;
  --color-wisdom-light:#48463e;
}
main .tree a {
  color:var(--color-light-shade);
}
main .tree a:visited {color:var(--color-light-shade);}
}