@font-face { font-family: 'Roboto'; src: url(fonts/Roboto-Regular.otf); }  /* only h1-6, thus no italic */
@font-face { font-family: 'Piazzolla'; src: url(fonts/Piazzolla.ttf); }
@font-face { font-family: 'Piazzolla'; font-style: italic; src: url(fonts/Piazzolla-Italic.ttf); }
@font-face { font-family: 'Iosevka'; src: url(fonts/iosevka-ss04-regular.ttf); }

body {
  font-family: Piazzolla, Helvetica Neue, sans-serif;
  font-weight: 400;
}
b,strong { font-weight: 600; }
h1,h2,h3,h4,h5,h6,.topnav {
  font-family: Roboto, Helvetica Neue, sans-serif;
}
pre, pre > code {
  margin-left: 0.1em;
  font-family: Iosevka, Menlo, Consolas, Courier, monospace;
  font-size: 1rem;
}
#subtitle { margin-top: inherit; }
@media (prefers-color-scheme: dark) {
    body { background: #17110E; color: #DDD; font-weight: 500; }
    b, strong { font-weight: 600; color: #FFF; }
}

/* Quick-jump to section navigation */
div.topnav {
    color:grey;
    z-index: 1;
    background-color: white;
    overflow: hidden;
    width: max-content;
    max-width: 100%;
}
.topnav a {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    display: block;
}
.topnav a:hover {
    background-color: whitesmoke;
    color: black;
}
@media (prefers-color-scheme: dark) {
    div.topnav { background-color: #372F2C; color: #DDD; }
}

/* Back-to-top button */
.button {
    border: 2px solid #ff5050;
    color: #ff5050;
    background-color: #ffffff;
    align-self: baseline;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    position: fixed;
    bottom: 1em;
}
.button:hover {
    color: #ffffff;
    transition-timing-function: ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #ff5050;
}

/* Margin-Sections */
p + .h5-spacer {
    margin-top: 2.2rem;
}
h4,h5 {
    font-size: 1.4em;
    margin-bottom: 1rem;
}
h4 + p, h5 + p { margin-top: 0; }
h5 { display: none; }
@media (max-width: 760px) {
    .h5-spacer { display: none; }
    h5 { display: inherit; }
    h5 + p>.marginnote, h5 + p>.sidenote {
        display: none;
    }
}

/* Support for Checkbox-Lists */
input[type='checkbox'] { width: 1.4em; height: 1.4em; margin: 0 .5em 0 0; }
li.checkbox { text-indent: -1.4em; }
li.checkbox::marker { content: ''; }

/* Override original Tufte CSS */

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

h3 { line-height: inherit; }

h2, h3, h4 {
    font-style: unset;
    margin-top: 2.5rem;
}
a:link, .tufte-underline, .hover-tufte-underline:hover {
    /*background: unset;*/
    text-shadow: unset;
}

/*
  You can choose between two modes.
  The former will display all margin notes in-text.
  The latter will add a toggle button.
*/

@media (max-width: 760px) {
    .sidenote, .marginnote {
        display: block;
        width: 90%;
        margin: 1rem 5%;
    }
}
/*
label.mtoggle::before { content: unset; }
@media (max-width: 760px) {
    label.mtoggle::before { content: ' ⊕'; }
}*/