* {
    padding: 0;
    margin: 0;
}

:root {
    --bg-normal: #EDF6F9;
    --bg-dimmed: gray;
    --bg-exposed: #83C5BE;
    --bg-highlight: #FFDDD2;
    --fg-normal: #006D77;
    --fg-highlight: #A24528;
}

html {
    color: var(--fg-normal);
    background-color: var(--bg-exposed);
    font-family: sans;
}

body {
    margin: 0;
  /* margin: 0 auto; */
  /* max-width: 36em; */
  /* padding-left: 50px; */
  /* padding-right: 50px; */
  /* padding-top: 50px; */
  /* padding-bottom: 50px; */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

@media (max-width: 600px) {
  body {
    font-size: 0.9rem;
    /* padding: 12px; */
  }
  h1 {
    font-size: 1.8rem;
  }
}

@media print {
  html {
    background-color: white;
  }
  body {
    background-color: transparent;
    color: black;
    font-size: 12pt;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3, h4 {
    page-break-after: avoid;
  }
}

header, nav, main, footer {
    width: 100%;
    /* background-color: #5CA4A9; */
    /* padding: 1rem 0; */
}

/* .content */
header > *, nav > *, main > *, footer > *,
.highlight > *, blockquote > * {
    margin: 0 auto;
    max-width: 36rem;
    padding: 0 2vw;
}

h1, h2, h3, h4, h5, h6 {
    /* margin-top: 1.4rem; */
    margin-top: 2.8rem;
    color: var(--fg-normal);
}

.highlight {
    max-width: inherit;
    /* color: #E29578; */
    color: var(--fg-highlight);
    background-color: var(--bg-highlight);    
    padding: 2rem 0;
    margin: 3rem 0;
}

.highlight h1, .highlight h2, .highlight h3, .highlight h4, .highlight h5, .highlight h6 {
    color: var(--fg-highlight);
}

.highlight h2, .highlight h3 {
    margin-top: 1rem;
}

blockquote {
    max-width: inherit;
    /* padding: 1rem 0; */
    /* padding: 0; */
    margin: 2rem 0;
    /* margin: 1em 0 1em 1.7em; */
    /* padding-left: 1em; */
    color: var(--fg-highlight);
    font-style: italic;
    z-index: 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 600px) {
    blockquote {
        margin: 3rem 0;        
    }
    
    blockquote > * {
        /* border-left: 2px solid var(--bg-exposed); */
        /* padding: 0 7vw; */
        max-width: 30rem;
    }

    blockquote > *:first-child:before {
        content: "“ ”";
        width: 52rem;
        font-family: Times;
        font-size: 20rem;
        /* float: left; */
        position: absolute;
        /* left: 0; */
        color: var(--bg-highlight);
        z-index: -1;
        /* margin: -8.5rem 0 0 -12.0rem; */
        margin: -6rem -12rem 0;
        text-align: justify;
        text-align-last: justify;
    }
}

nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

nav ul ul {
    position: absolute;
    display: none;
    text-align: left;
    background-color: var(--bg-exposed);
}

nav li:hover ul, nav li:focus ul {
  display: block !important;
}

nav span {
    font-weight: bold;
}

nav span:after {
    content: "▾";
    margin-left: 0.5em;
}

nav li {
    list-style: none;
}

nav a, nav span {
    padding: 1.5rem 1.0rem;
    display: flex;          /* prevent collapsing padding/margin */
}

nav, footer {
    color: var(--fg-normal);
    background-color: var(--bg-exposed);
}

nav a,
footer a {
    color: var(--fg-normal);
}

nav > ul > li:first-child a {
    padding-left: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main {
    background-color: var(--bg-normal);
    padding-top: 1rem;
    padding-bottom: 2rem;
}

header {
    padding: 1rem 0;
    color: var(--fg-normal);
    background-color: var(--bg-normal);
    /* padding: 2em 0 1em; */
    line-height: 7rem;
    text-align: center;
}

header div div {
    font-size: 3rem;
    font-weight: bold;
}

header .content {
    display: flex;
    justify-content: space-between;
}

footer {
    padding: 1rem 0;
    text-align: center;
}

div.columns {
    display: flex;
    gap: min(5vw, 1.5em);
}

div.column {
    flex: 1 1 0px;
    overflow-x: auto;
}

@media (max-width: 600px) {
    div.columns {
        flex-direction: column;
        align-items: center;
    }

    div.column {
        flex: auto;
        max-width: 300px;
    }
}

.center {
    text-align: center;
}

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

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

a {
  color: var(--fg-highlight);
}

a:visited {
  color: var(--fg-highlight);
}

main ol, main ul {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* main li > ol, main li > ul { */
/*     margin-top: 0; */
/* } */

main li {
    margin-left: 1.5rem;
}

hr {
    margin: 4rem auto;
    padding: 0;
    border-width: 0;
    border-top: 1px dashed var(--bg-exposed);
}


/*
 * figures
 */


figure {
    margin-top: 2em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-highlight);
    padding-top: 2vw;
    padding-bottom: 2vw;
    position: relative;
}

figure > figcaption {
    text-align: center;
    font-style: italic;
    max-width: 36rem;
    margin-top: 1em;
}

figure > img {
    /* width: 100%; */
    width: auto;
    text-align: center;
    max-width: 100%;
}

main > figure > img,
main > .carousel .carousel-item {
    cursor: pointer;    
}

main > figure > img:focus,
/* main > figure:focus-within, */
/* main > .carousel:has(*:active) figure > img, */
/* main > .carousel:has(*:focus) figure > img { */
/* main > .carousel:focus-within figure > img { */
main > .carousel:focus-within .carousel-item {
    /* width: auto; */
    /* text-align: center; */
    cursor: inherit;
    /* max-width: 100%; */
}

main > figure,
main > .carousel {
    transition: max-width 1s;
}

main > figure:has(> img:focus),
/* main > figure:focus-within, */
/* main > .carousel:has(*:active), */
/* main > .carousel:has(*:focus) { */
main > .carousel:focus-within {
    max-width: 100vw;
}

/* figure:has(> img:focus) > figcaption:before { */
/*     content: ""; */
/*     display: block; */
/*     position: absolute; */
/*     top: 0; */
/*     bottom: 0; */
/*     left: 0; */
/*     right: 0; */
/* } */


details {
    color: var(--fg-highlight);
    background-color: var(--bg-highlight);
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
}

details[open] {
    padding-bottom: 2vw;
}

summary {
    cursor: pointer;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
}

pre {
    overflow-x: auto;
    font-size: 90%;
}


/* TODO review below */
/*
img {
  max-width: 100%;
}
svg {
  height: auto;
  max-width: 100%;
}
h5, h6 {
  font-size: 1em;
  font-style: italic;
}
h6 {
  font-weight: normal;
}
code {
  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
  font-size: 85%;
  margin: 0;
  hyphens: manual;
}
pre {
  margin: 1em 0;
  overflow: auto;
}
pre code {
  padding: 0;
  overflow: visible;
  overflow-wrap: normal;
}
.sourceCode {
 background-color: transparent;
 overflow: visible;
}
hr {
  border: none;
  border-top: 1px solid #1a1a1a;
  height: 1px;
  margin: 1em 0;
}
table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
  overflow-x: auto;
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
}
table caption {
  margin-bottom: 0.75em;
}
tbody {
  margin-top: 0.5em;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
th {
  border-top: 1px solid #1a1a1a;
  padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
  padding: 0.125em 0.5em 0.25em 0.5em;
}
#TOC li {
  list-style: none;
}
#TOC ul {
  padding-left: 1.3em;
}
#TOC > ul {
  padding-left: 0;
}
#TOC a:not(:hover) {
  text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
   override a similar rule in reveal.js * /
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
  font-size: inherit;
  width: 0.8em;
  margin: 0 0.8em 0.2em -1.6em;
  vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
*/




/*
 * Carousel
 */

.carousel {
  position: relative;
  background-color: var(--bg-highlight);
  margin-top: 2em;
  margin-bottom: 2em;
}

.carousel-images {
  display: flex;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* .carousel-image { */
/*   display: block; */
/*   width: 100%; */
/* } */

.carousel-controls {
  text-align: center;
  padding-bottom: 2vw;
}

.carousel-dot {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  outline: none;
  background-color: var(--fg-highlight);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s;
}
.carousel-dot:not(:first-child) {
  margin-left: 0.25em;
}
.carousel-dot:hover, .carousel-dot:focus {
  opacity: 1;
}

.carousel p {
  margin: 0;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.carousel-item figure {
    margin: 0;
}


/* page-specific styling */

main#page-index h2 {
    /* margin-top: 5.6rem; */
    margin-top: 7vw;
}

main#page-outline h3 {
    text-align: center;
    font-variant: small-caps;
}