:root {
  color-scheme: light dark;
  /* Selenized White/Black for main content */
  --bg-0: light-dark(#ffffff,#181818);
  --bg-1: light-dark(#ebebeb,#252525);
  --bg-2: light-dark(#cdcdcd,#3b3b3b);
  --dim-0: light-dark(#878787,#777777);
  --fg-0: light-dark(#474747,#b9b9b9);
  --fg-1: light-dark(#282828,#dedede);
  --red: light-dark(#d6000c,#ed4a46);
  --green: light-dark(#1d9700,#70b433);
  --yellow: light-dark(#c49700,#dbb32d);
  --blue: light-dark(#0064e4,#368aeb);
  --magenta: light-dark(#dd0f9d,#eb6eb7);
  --cyan: light-dark(#00ad9c,#3fc5b7);
  --orange: light-dark(#d04a00,#e67f43);
  --violet: light-dark(#7f51d6,#a580e2);
  /* Selenized Light/Dark for code content */
  --code-bg-0: light-dark(#fbf3db,#103c48);
  --code-bg-1: light-dark(#ece3cc,#184956);
  --code-bg-2: light-dark(#d5cdb6,#2d5b69);
  --code-dim-0: light-dark(#909995,#72898f);
  --code-fg-0: light-dark(#53676d,#adbcbc);
  --code-fg-1: light-dark(#3a4d53,#cad8d9);
  --code-red: light-dark(#d2212d,#fa5750);
  --code-green: light-dark(#489100,#75b938);
  --code-yellow: light-dark(#ad8900,#dbb32d);
  --code-blue: light-dark(#0072d4,#4695f7);
  --code-magenta: light-dark(#ca4898,#f275be);
  --code-cyan: light-dark(#009c8f,#41c7b9);
  --code-orange: light-dark(#c25d1e,#ed8649);
  --code-violet: light-dark(#8762c6,#af88eb);
  font-family: "Open Sans", sans-serif, serif;
  --para-margin: 0.5rem;
}


html {
  /* Set basic colors */
  color: var(--fg-0);
  background-color: var(--bg-1);
}
body {
    margin: 0 auto;
    max-width: 65rem;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    hyphens: auto;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    background-color: var(--bg-0);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body > * {
    width: 100%;
}

@media (max-width: 600px) {
    body {
        font-size: 0.9em;
        padding: 12px;
    }
    h1 {
        font-size: 1.8em;
    }
}
@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;
    }
}
p {
    margin: var(--para-margin) 0;
}
a {
    color: var(--blue);
}
a:visited {
    color: var(--magenta);
}
img {
    max-width: 100%;
}
svg {
    height: auto;
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 1.4em; */
}
h5, h6 {
    font-size: 1em;
    font-style: italic;
}
h6 {
    font-weight: normal;
}
ol, ul {
    padding-left: 1.7em;
    margin-top: var(--para-margin);
}
li > ol, li > ul {
    margin-top: 0;
}
h1 {
    color: var(--blue);
}
h2 {
    color: var(--green);
}
h3, h4, h5, h6 {
    color: var(--magenta);
}
blockquote {
    margin: 1em 0 1em 1.7em;
    padding-left: 1em;
    border-left: 2px solid var(--blue);
    color: var(--blue);
    background-color: var(--bg-1);
}
pre {
    margin: var(--para-margin) 0;
    overflow: auto;
}
hr {
    background-color: var(--bg-2);
    border: none;
    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 var(--bg-2);
    border-bottom: 1px solid var(--bg-2);
}
th {
    border-top: 1px solid var(--bg-2);
    padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
    padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
    margin-bottom: 4em;
    text-align: center;
}
#TOC li {
    list-style: none;
}
#TOC ul {
    padding-left: 1.3em;
}
#TOC > ul {
    padding-left: 0;
}
#TOC a:not(:hover) {
    text-decoration: none;
}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
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;}

/* Handle source code rendering with highlighting */
code {
    font-family: "Iosevka Web", monospace;
    font-size: 1rem;
    line-height: 0.7rem;
    white-space: pre;
    background-color: var(--code-bg-0);
    color: var(--code-fg-0);
    marigin: var(--para-margin) var(--para-margin);
}

code.IdrisCode {
    display: block;
    word-wrap: normal;
    overflow: auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-radius: 0.5rem;
}

/** Style up the idris elements **/
.IdrisKeyword {
    color: var(--green);
    font-weight: bold;
}
.IdrisModule {
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--fg-1);
}
.IdrisType {
    color: var(--blue);
}
.IdrisBound {
    color: var(--violet);
}
.IdrisFunction {
    color: var(--green);
}
.IdrisData {
    color: var(--red);
}
.IdrisComment {
    color: var(--cyan);
}
.IdrisPostulate {
  color: var(--code-orange);
  font-style: italic;
  font-weight: bold;
}

/* Alerts */

.alert {
  display: flex;
  flex-direction: row;
  width: 75%;
  background-color: var(--bg-1);
  margin: 0.75rem;
  border-left: solid 0.75rem;
  border-top-right-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.alert .title {
  width: 6rem;
  font-weight: bold;
  border-right: dotted 0.2rem;
  border-color: var(--dim-0);
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
  background-color: var(--bg-2);
}

.alert .body {
  display: flex;
  flex-direction: column;
  margin: 0.7rem;
}

.alert .body p {
  margin: 0.5rem 0;
}

.note .title {
  color: var(--blue);
}

.tip .title {
  color: var(--green);
}

.warning .title {
  color: var(--red);
}


div.note {
  border-color: var(--blue);
}

div.tip {
  border-color: var(--green);
}

div.warning {
  border-color: var(--red);
}

/* .note, .tip, .warning { */
/*     display: flex; */
/*     /\* flex-direction: column; *\/ */
/*     flex-direction: row; */
/*     width: 70%; */
/*     background-color: var(--bg-1); */
/*     color: var(--fg-1); */
/*     padding: 0rem; */
/*     margin: 0.75rem; */
/*     gap: 0.75rem; */
/* } */
/* .note p, .tip p, .warning p { */
/*   margin: 0rem; */
/* } */
/* .note > p, .tip > p, .warning > p { */
/*   padding: 0.5rem; */
/* } */
/* .note .title, .tip .title, .warning .title { */
/*   width: 6rem; */
/*   font-weight: bold; */
/*   font-size: 1.1rem; */
/*   border-right: dotted 0.2rem; */
/*   border-color: var(--dim-0); */
/*   display: flex; */
/*   flex-direction: column; */
/*   align-content: center; */
/*   justify-content: center; */
/*   /\* margin-left: 0.75rem; *\/ */
/*   text-align: center; */
/* } */

/* .note { */
/*     border-color: var(--blue); */
/* } */
/* .tip { */
/*     border-color: var(--green); */
/* } */
/* .warning { */
/*     border-color: var(--red); */
/* } */