/** Site Theme */
/* CSS Reset from: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after { box-sizing: border-box; }

/* 2. Remove default margin
*/
* { margin: 0; }

/* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering
*/
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* 5. Improve media defaults
*/
img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* 6. Remove built-in form typography styles
*/
input, button, textarea, select { font: inherit; }

/* 7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* 8. Create a root stacking context
*/
#root, #__next { isolation: isolate; }

/** Page Layout **/
body { margin: 0; }

main { display: block; padding-left: 1em; padding: 1em; }
main:after { content: ""; display: table; clear: both; }
@media screen and (min-width: 720px) { main { margin-left: 250px; margin-top: 5em; padding: 2em 4em; } }

.flex-container { display: flex; flex-flow: row wrap; }

/** Site Header */
header { background: #523604; color: #fff7e8; text-align: center; height: 5em; padding-top: 1em; }
@media screen and (min-width: 720px) { header { position: fixed; top: 0; left: 0; right: 0; } }
@media print { header { background: #fff7e8; color: #523604; } }
header button.hamburger { display: block; background: none; border: none; color: #fff7e8; font-size: 24px; cursor: pointer; padding: 10px; float: left; }
@media screen and (min-width: 720px) { header button.hamburger { display: none; } }
@media print { header button.hamburger { display: none; } }

/** Site Navigation **/
nav { background-color: #f8c260; padding-bottom: 1em; }
@media screen and (min-width: 720px) { nav { display: block; width: 250px; position: fixed; top: 0; left: 0; bottom: 0; margin-top: 5em; padding-top: 1em; } }
@media print { nav { display: none; } }
nav ul { list-style: none; }
nav ul > li { padding-top: 0.3em; }
nav > ul > li { padding-top: 1em; }
nav .nav-submenu { /* TODO - hide/show these with js */ }
nav a.nav-link { color: #00796c; }
nav a.nav-link:visited { color: #00796c; }
nav a.nav-link:hover { color: #00473d; }
nav a.nav-link:focus { color: #00473d; }

/** Site Footer */
footer { border-top: 1px solid #523604; width: 100%; text-align: center; padding-top: 1em; font-size: 15px; color: #c08521; }
@media print { footer { border: none; font-size: 9pt; display: none; } }

/** Site Colours */
.color-light-1 { background-color: #fff7e8; }

.color-light-2 { background-color: #dfe0df; }

.color-dark-1 { background-color: #523604; }

.color-dark-2 { background-color: #c08521; }

.color-contrast-1 { background-color: #f8c260; }

.color-contrast-1 { background-color: #f8c260; }

.color-link { background-color: #00796c; }

.color-link-active { background-color: #00473d; }

/** Headings */
h1 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

h2 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

h3 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

h4 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

h5 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

h6 { margin: 0; padding: 0; margin-bottom: 15px; font-weight: 400; }

/** Basic styling */
p { margin: 0; padding: 0; margin-bottom: 15px; }

.visible { display: block; }

.hidden { display: none; }

@media print { .no-print { display: none; } }

/** Blockquotes */
blockquote { margin: 0; padding: 0; margin-bottom: 15px; color: #c08521; border-left: 4px solid #c08521; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

pre { margin: 0; padding: 0; margin-bottom: 15px; font-size: 15px; border: 1px solid #523604; border-radius: 3px; background-color: #dfe0df; padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

hr { margin: 0; padding: 0; }

/** Lists */
dl { margin: 0; padding: 0; margin-bottom: 15px; }
dl dt { font-weight: bold; }
dl dd { margin-left: 2em; }

dd { margin: 0; padding: 0; }

ol { margin: 0; padding: 0; margin-bottom: 15px; margin-left: 30px; }

ul { margin: 0; padding: 0; margin-bottom: 15px; margin-left: 30px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure { margin: 0; padding: 0; margin-bottom: 15px; }
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
li > ul { margin-bottom: 0; }
li > ol { margin-bottom: 0; }

/** Links */
a { color: #00796c; text-decoration: none; }
a:visited { color: #00796c; }
a:hover { color: #00473d; text-decoration: underline; }

/** Input Forms */
.formControls { margin-top: 1em; }

button { border: 1px solid #523604; border-radius: 5px; padding: 3px 5px; background-color: #dfe0df; color: #523604; }

.slidecontainer label { width: 50%; max-width: 13em; }
.slidecontainer label span { color: #c08521; float: right; }
.slidecontainer input { width: 40%; max-width: 32em; }

/** Icons */
.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #523604; padding-right: 5px; vertical-align: text-top; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; border-collapse: collapse; border: 1px solid #523604; }
table tr:nth-child(even) { background-color: #dfe0df; }
table th { padding: 10px 15px; background-color: #c08521; color: #fff7e8; border: 1px solid #523604; }
table td { padding: 10px 15px; border: 1px solid #523604; }

/** Math Formatting */
.equation { font-family: "Cambria Math", "Times New Roman", serif; }

var { font-family: Georgia, serif; font-style: italic; }

.oddNum { color: #006600; }

.evenNum { color: #000066; }

/** Code Formatting */
code { font-size: 15px; border: 1px solid #523604; border-radius: 3px; background-color: #dfe0df; padding: 1px 5px; }

/** Collatz path formatting */
.collatzPath #path { list-style: none; margin: 1em auto 0; padding: 0; text-align: left; }
.collatzPath #path li { display: inline; }
.collatzPath #path li::before { content: '\0020\2192\0020'; }
.collatzPath #path li:first-child::before { content: ''; }
.collatzPath #path .oddNum, .collatzPath #path .evenNum { font-weight: bold; }

/** Problemset Styling */
/** Controls */
#controls { border: 1px solid #523604; padding: 1em; margin-bottom: 1em; }
#controls .form-controls { display: flex; flex-flow: row wrap; align-content: space-between; }
#controls .form-controls .form-column { flex-grow: 1; display: inline-flex; flex-flow: column wrap; padding-right: 2em; margin-bottom: 1em; }
#controls .form-controls .no-grow { flex-grow: 0; }
#controls button { display: inline-block; margin-right: 1em; }
@media print { #controls { display: none; } }

/** Problems */
#problems { display: flex; flex-flow: row wrap; justify-content: flex-start; }
@media print { #problems { justify-content: flex-start; } }
#problems > :hover { background-color: #edc38d; }
#problems .questionBlock { border: 1px solid #c08521; padding: 0.3em; min-height: 5em; display: grid; grid-template-columns: 2em auto; grid-template-rows: auto 1.8em; grid-template-rows: auto auto; justify-content: start; column-gap: 0; row-gap: 0; }
@media print { #problems .questionBlock { border: none; min-height: 8em; page-break-inside: avoid; } }
#problems .questionBlock .questionNumber { grid-column: 1 / span 1; grid-row: 1 / span 1; }
#problems .questionBlock .question { font-size: 130%; grid-column: 2 / span 1; grid-row: 1 / span 1; }
#problems .questionBlock .reveal { align-self: end; width: 10em; grid-column: 1 / span 2; grid-row: 2 / span 1; }
@media print { #problems .questionBlock .reveal { display: none; } }
#problems .questionBlock .solution { font-size: 130%; margin-left: 0.2em; grid-column: 1 / span 2; grid-row: 2 / span 1; }
@media print { #problems .questionBlock .solution { display: none; } }
#problems .questionBlock .solution::before { content: "= "; }

/** Solutions */
#solutions { flex-flow: row wrap; font-size: 10pt; page-break-inside: avoid; align-items: baseline; border-top: 1px solid #523604; padding-top: 0.2em; }
#solutions .solutionBlock { justify-content: start; display: block; margin-right: 3em; line-height: 1.6em; white-space: nowrap; }
#solutions .solutionBlock .questionNumber { width: 2em; }
@media print { #solutions { transform: rotate(180deg); border-top: none; border-bottom: 1px solid #523604; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlighter-rouge .highlight { background: #eef; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

#color-swatches { display: flex; flex-flow: row wrap; margin-bottom: 2em; }
#color-swatches div { height: 50px; width: 50px; border: 1px solid black; }
