@font-face {
    font-family: "source_code_pro";
    src: url("../webfonts/SourceCodePro-Regular.otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "source_code_pro";
    src: url("../webfonts/SourceCodePro-Bold.otf");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "source_code_pro";
    src: url("../webfonts/SourceCodePro-It.otf");
    font-weight: normal;
    font-style: italic;
}

html {
    font-family: source_code_pro,monospace;
    font-size: 20px;
}
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
ul, ol {
    margin-left: 1em;
}
td {
    padding-right: 2em;
}
main {
    height: 100%;
    margin-left: 1em;
}
main > article {
    width: 70%;
    height: 100%;
    overflow-y: scroll;
    float: left;
}
main > article.no-navigation {
    width: 100%;
}
main > nav {
    width: 30%;
    height: 100%;
    overflow-y: scroll;
}
nav ul {
    margin: 0 0 4em 0;
    padding: 0 0 0 1em;
}
nav.article .navigation-entry {
    color: inherit;
    cursor: pointer;
}
.navigation-entry.section {
    margin-left: 1em;
    list-style-type: circle;
}
.dark nav.article .navigation-entry {
    color: #777777;
}
.dark nav.article .navigation-entry.active {
    color: inherit;
}
.light nav.article .navigation-entry {
    color: #555555;
}
.light nav.article .navigation-entry.active {
    color: inherit;
}
.dark {
    background-color: black;
    color: lightgray;
}
.dark a {
    color: lightblue;
}
.dark a:visited {
    color: mediumpurple;
}
.light {
    background-color: lightgray;
    color: black;
}
button, input, select {
    background-color: inherit;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
}
.capitalize {
    text-transform: uppercase;
}
button.bigger {
    font-size: 28px;
}
button.smaller {
    font-size: 10px;
}
.navigation-collapse, .navigation-expand {
    position: fixed;
    top: 4px;
    right: 16px;
    font-size: 150%;
}
.dark .navigation-collapse, .dark .navigation-expand {
    background-color: darkblue;
}
.light .navigation-collapse, .light .navigation-expand {
    background-color: lightblue;
}
img {
    max-width: 100%;
    background: white;
}
div.calendar-data {
    margin: 4em 0;
}
.dark .vis-item {
    color: inherit;
    background-color: darkblue;
    border-color: darkgray;
}
.input-year {
    width: 6em;
}
.input-month, .input-day {
    width: 3em;
}
input, select {
    margin-right: 1em;
}
button.dark, button.play-all {
    display: none;
}
.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    margin-right: 1em;
}
.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    margin-right: 1em;
}
.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    margin-right: 1em;
}
.grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    margin-right: 1em;
}
.grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    margin-right: 1em;
}
.column0 {
    grid-column: 1;
}
.column1 {
    grid-column: 2;
}
.column2 {
    grid-column: 3;
}
.column3 {
    grid-column: 4;
}
.column4 {
    grid-column: 5;
}
.column5 {
    grid-column: 6;
}
.book {
    cursor: pointer;
}