@font-face {
  font-family: sourceSansProLight; /* set name */
  src: url(fonts/source-sans-pro.light.ttf); /* url of the font */
}

@font-face {
  font-family: sourceCodePro; /* set name */
  src: url(fonts/SourceCodePro-Regular.ttf); /* url of the font */
}

*, *::before, *::after {
    font-family: sourceSansProLight;
    box-sizing: content-box;
}

.sourceCode, .sourceCode * {
    font-family: sourceCodePro;
}

div.sourceCode {
    padding-bottom: 10px;
}

pre {
    /* border-radius: 4px; */
    font-size: 10pt;
    width: fit-content;
    padding: 10pt;
    /* background: linear-gradient(45deg, white, azure); */
    background: #EEE !important;
    box-shadow: #888 5px 5px 5px 0;
}

* > code {
    font-family: sourceCodePro;
    /* background: #EEF; */
    /* padding: 0 0.1em; */
    /* border-radius: 5pt; */
}

p.subtitle {
    font-size: 1.5em;
}

p.author::before {
    content: "By ";
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.12em; }
h6 { font-size: 1.05em; }

h1 {
    border-bottom: 2px solid black;
}

h2 {
    padding-bottom: 2px;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    max-height: 500px;
    border-radius: 10px;
    box-shadow: #888 0 0 10px
}

figure > figcaption {
    margin-top: 7pt;
    text-align: center;
}

table {
    margin: 0 auto;
    /* Connect horizontal lines through column boundaries. */
    border-collapse: collapse;
}

/* tr:nth-child(even) { */
/*     background-color: #EEEEEE; */
/* } */

tr.even {
    background-color: #EEEEEE;
}

td, th {
    padding: 4px;
}

table > thead {
    border-bottom: 2px solid black;
}

table > colgroup {
    border-top: 2px solid black;
    border-bottom: 1px solid black;
}

table > tbody {
    border-bottom: 2px solid black;
}

/* Override Pandoc's colgroups */
col {
  width: auto !important;
}

body {
    margin: 0;
    background: snow;
    width: 100%;
}

.container {
    width: 100%;
    background: #F9F9F9;
}

.main {
    background-color: white;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 10pt;
    padding-right: 10pt;
    min-height: 100vh;
}

.main.without-aside {
    margin: 0 auto;
    /* 480pt = 80 column width */
    max-width: 575pt;
    box-shadow: #AAA 0px 0px 40px;
}

.main.without-aside h1 {
    padding-top: 24px;
    /* margin-top: 0; */
}

.main.without-aside > *:last-child {
    padding-bottom: 12pt;
    margin-bottom: 0pt;
}

@media screen and (min-width: 572px) {
    .schedule {
        font-size: 1em;
    }
    pre {
        font-size: 10pt;
    }
}

@media screen and (max-width: 572px) {
    .schedule {
        font-size: 0.5em;
    }
    pre {
        font-size: 7pt;
    }
}

/* 745 = 575 + 160 + 10 */
@media screen and (min-width: 745pt) {
    .container {
        margin: 0 auto;
        width: 745pt;
        display: grid;
        /* 575 + 10; 160 */
        grid-template-columns: calc(575pt + 10pt) 160pt;
        box-shadow: #AAA 5px 0px 5px;
    }
    .main.with-aside {
        display: grid;
        grid-template-columns: 575pt 160pt;
        box-shadow: #AAA -5px 0px 5px;
    }
    .container * {
        grid-column: 1;
    }
}

.speaker_note {
    color: #002244;
}

.fun_fact > p {
    border-radius: 0 5px 5px 0;
    line-height: 1.3;
    background: linear-gradient(45deg, white, azure);
    padding: 1em;
    border-left: 5px solid black;
}

@media screen and (min-width: 641pt) {
    .fun_fact {
        grid-column: 2;
        width: 160pt;
        height: 0pt;
    }
}

/* NOTE(Brent): Set this min-width manually... */
@media screen and (min-width: 1029pt) {
    #TOC {
        position: fixed;
        padding-left: 10pt;
        top: 10pt;
        left: 0pt;
        width: 140pt;
        /* border-bottom-right-radius: 15px; */
        /* background: snow; */
        /* box-shadow: #AAA 0px 0px 20px; */
    }
}

#home-link {
    font-size: 24px;
    text-decoration: none;
}

#home-link:hover {
    font-weight: bold;
}

#home-link:visited {
    color: blue;
}

#TOC a:visited {
    color: blue;
}

#TOC li {
    margin: 4px 0;
}

div.centered {
    text-align: center;
}

.comment {
    display: none;
}

.spoilers::before {
    content: 'Hover your mouse here to reveal the answer.';
    color: white;
}

.spoilers {
    content: '';
    padding: 10pt;
    color: #222222;
    border-radius: 15px;
    box-shadow: #888 0 0 10px;
    background: #222222;
}

.spoilers:hover {
    cursor: default;
    background: none;
    color: black;
}

.spoilers:hover::before {
    content: none;
    color: white;
}

/* NOTE(Brent): We print the message again in white afterwards to ensure that
 * the size of the spoilers box remains the same, without actually showing the
 * tip message again. */
.spoilers:hover::after {
    content: 'Hover your mouse here to reveal the answer.';
    color: white;
}

.no-border-no-shadow, .no-border-no-shadow * {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.title {
    font-size: xxx-large;
}

.parse-h * {
    max-width: 100%;
    max-height: none;
}

.examples td {
    background: #eee;
}

.examples tr:nth-child(even) > td,
.examples tr:nth-child(even) > td > div.sourceCode > pre.sourceCode {
    background: white !important;
}

table.examples > tbody > tr > td:nth-child(2),
table.examples > tbody > tr > td:nth-child(3) {
    border-left: 1px dotted black;
}

table.examples pre.sourceCode {
    box-shadow: none;
}