$lbg:       #f9f5d7;
$lbg0:      #fbf1c7;
$lbg0h:     #f9f5d7;
$lbg0s:     #f2e5bc;
$lbg1:      #ebdbb2;
$lbg2:      #d5c4a1;
$lbg3:      #bdae93;
$lbg4:      #a89984;
$lfg:       #3c3836;
$lfg0:      #282828;
$lfg1:      #3c3836;
$lfg2:      #504945;
$lfg3:      #665c54;
$lfg4:      #7c6f64;
$dbg:       #282828;
$dbg0:      #282828;
$dbg0h:     #1d2021;
$dbg0s:     #32302f;
$dbg1:      #3c3836;
$dbg2:      #504945;
$dbg3:      #665c54;
$dbg4:      #7c6f64;
$dfg:       #ebdbb2;
$dfg0:      #fbf1c7;
$dfg1:      #ebdbb2;
$dfg2:      #d5c4a1;
$dfg3:      #bdae93;
$dfg4:      #a89984;
$gray:      #928374;
$gray1:     #a89984;
$red:       #cc241d;
$green:     #98971a;
$yellow:    #d79921;
$blue:      #458588;
$purple:    #b16286;
$aqua:      #689d6a;
$orange:    #d65d0e;
$bred:      #fb4934;
$bgreen:    #b8bb26;
$byellow:   #fabd2f;
$bblue:     #83a598;
$bpurple:   #d3869b;
$baqua:     #8ec07c;
$borange:   #fe8019;
$dred:      #9d0006;
$dgreen:    #79740e;
$dyellow:   #b57614;
$dblue:     #076678;
$dpurple:   #8f3f71;
$daqua:     #427b58;
$dorange:   #af3a03;
$ared:      #421e1e;
$ablue:     #2b3c44;
$aaqua:     #36473a;
$sienna:    #dd6f48;
$slategray: #528b8b;
$lightblue: #66999d;
$burlywood: #bbaa97;
$aquamarine: #83a598;
$turquoise: #61acbb;



@import url(https://code.cdn.mozilla.net/fonts/fira.css);
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

:root {
    --purple: #{$purple};
    --aqua: #{$aqua};
    --blue: #{$blue};
    --red: #{$red};
    --orange: #{$orange};
    --href-hover: #{$borange};
    --hr: #{$gray};
}

:root[color-mode=light] {
    --html-bg: #{$lbg1};
    --bg: #{$lbg};
    --fg: #{$lfg};
    --href: #{$dorange};
    --aqua1: #{$daqua};
    --code-bg: #{$lbg1};
    --footer-href: #{$dpurple};
    --footer-href-hover: #{$purple};
}

:root[color-mode=dark] {
    --html-bg: #{$dbg0h};
    --bg: #{$dbg};
    --fg: #{$dfg};
    --href: #{$orange};
    --aqua1: #{$aqua};
    --code-bg: #{$dbg1};
    --footer-href: #{$purple};
    --footer-href-hover: #{$bpurple};
}

html {
    font-family: 'Fira Sans', sans-serif;
    background-color: var(--html-bg);
    color: var(--fg);
    margin: 1em;
}

body {
    background-color: var(--bg);
    margin: 0 auto;
    max-width: 30cm;
    border: 1pt solid var(--fg);
    padding: 1em;
}

a {
    color: var(--href);
    text-decoration: underline;
}

a:hover {
    color: var(--href-hover);
    text-decoration: underline;
}

a:active {
    outline: 0;
}

header {
    clear: both;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
}
header a, header a:hover {
    text-decoration: none;
}

#menu {
    clear: both;
    display: block;
    width: 100%;
    margin: 0 0 1em 0;
    color: var(--bg);
    background-color: var(--fg);
    overflow: hidden;
}
#menu a {
    display: block;
    float: left;
    padding: 5px 10px 5px 10px;
    color: var(--bg);
}
#menu a:hover {
    color: var(--href-hover);
}

code {
    font-family: 'Fira Code', monospace;
    background-color: var(--code-bg);
    padding: 2px;
}

button {
    line-height: normal;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    cursor: pointer;
}

button:active {
    outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-bottom: 0.5em;
    margin-top: 0em;
}

h1,
h2,
h3 {
    color: var(--purple);
}

h4,
h5 {
    color: var(--aqua);
}

h6 {
    color: var(--blue);
}

h1 {
    font-size: 2.2em;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.8em;
}
h4 {
    font-size: 1.4em;
}
h5 {
    font-size: 1.3em;
}
h6 {
    font-size: 1.1em;
}

hr {
    border: 0;
    border-top: 1px solid var(--hr);
}

img {
    max-width: 100%;
    padding: 2px;
    border: 3px solid var(--fg);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
table, th, td {
    border: 1px solid var(--hr);
    padding: 5px 10px 5px 10px;
}

blockquote {
    border-left: 5px solid var(--purple);
    margin: 20px 20px 10px 10px;
    padding: 0px 15px 0px 10px;
}
blockquote ul {
    margin-top: -10px;
    list-style-type: none;
    padding: 0px 1em 0px 1em;
}

footer {
    clear: both;
    padding-top: 10px;
    padding-bottom: 15px;
    font-weight: bold;
}
footer hr {
    border: 0;
    border-top: 3px double var(--hr);
}
footer a {
    text-decoration: none;
    color: var(--footer-href);
}
footer a:hover {
    color: var(--footer-href-hover);
    text-decoration: underline;
}

.comment {
    font-size: 0.75em;
}
.paper {
    padding: 0 0 1em 0;
}
.paper-title {
    font-size: 1.2em;
    font-weight: bold;
}
.paper-author {
    padding: 5px 0px 5px 0px;
    border-left: 2px solid var(--fg);
    margin: 0 0 0 1px;
}
.paper-author ul {
    display: flex;
    list-style-type: none;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.paper-author ul:before {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    content: 'with ';
}
.paper-author li:not(:last-child)::after {
    content: ', ';
}
.paper-foot {
    padding: 5px 0 0 0;
    border-bottom: 2px solid var(--fg);
    border-left: 2px solid var(--fg);
    margin: 0 0 0 1px;
}
.paper-foot ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.paper-foot li {
    float: left;
    padding: 1px 5px 1px 5px;
    border-right: 1px solid var(--fg);
}
.paper-abstract {
    padding: 0px 15px 0px 5px;
    border-left: 2px solid var(--fg);
    margin: 0 0 0 1px;
}
.abstract-button {
    background-color: var(--fg);
    //font-weight: bold;
    color: var(--bg);
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.abstract-button:hover {
    color: var(--href-hover);
}
.top-button {
    background-color: var(--bg);
    color: var(--fg);
    margin: 0 0 0 5pt;
}
.top-button a {
    color: var(--fg);
    text-decoration: none;
}
.top-button a:hover {
    color: var(--href-html-hover);
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.column {
    float: left;
}
.left {
    width: 70%;
}
.right {
    width: 30%;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}

.bare table {
    border-collapse: collapse;
    border: none;
}
.bare tr {
    border: none;
}
.bare th, .bare td {
    border: none;
    text-align: left;
    vertical-align: top;
    padding: 10px;
}
.bare th {
    text-align: right;
}
.bare ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

// .schedule table {
    // width: 100%;
    // text-align: center;

    // .teaching, .meetings, .seminars, .workshops, .office {
        // color: $bg;
    // }
    // .teaching {
        // background-color: $purple;
    // }
    // .meetings {
        // background-color: $red;
    // }
    // .seminars {
        // background-color: $green;
    // }
    // .workshops {
        // background-color: $aqua;
    // }
    // .office {
        // background-color: $yellow;
    // }
// }

.has-tooltip {
    position: relative;
}

.has-tooltip .tooltip {
    opacity: 0;
    visibility: hidden;
}

.has-tooltip:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip {
    background-color: var(--orange);
    bottom: 130%;
    color: var(--bg);
    font-size: 70%;
    left: 0%;
    width: 110px;
    padding: 2px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    word-break: normal;
    line-break: strict;
}

// @media screen and (max-width: 500px) {
    // .schedule {
        // font-size: 0.7em;
        // table, th, td {
            // padding: 1px 2px 2px 1px;
        // }
    // }
// }
// @media screen and (max-width: 400px) {
    // .schedule {
        // font-size: 0.5em;
        // table, th, td {
            // padding: 0px 0px 0px 0px;
        // }
    // }
// }

.toggle-color-button {
    color: var(--fg);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}


// Change header font based on screen size
@media screen and (max-width: 500px) {
    header {
        font-size: 0.7em;
    }
    #menu a {
        padding: 3px 5px 3px 5px;
    }
}
@media screen and (max-width: 400px) {
    header {
        font-size: 0.5em;
    }
    #menu a {
        padding: 2px 5px 2px 5px;
    }
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}





// article,
// aside,
// details,
// figcaption,
// figure,
// footer,
// header,
// hgroup,
// nav,
// section,
// summary {
    // display: block;
// }
// audio,
// canvas,
// video {
    // display: inline-block;
// }
// audio:not([controls]) {
    // display: none;
    // height: 0;
// }
// [hidden] {
    // display: none;
// }
// html {
    // font-family: sans-serif;
    // -webkit-text-size-adjust: 100%;
    // -ms-text-size-adjust: 100%;
// }
// body {
    // margin: 0;
// }
// a:focus {
    // outline: thin dotted;
// }
// a:active,
// a:hover {
    // outline: 0;
// }
// abbr[title] {
    // border-bottom: 1px dotted;
// }
// b,
// strong {
    // font-weight: bold;
// }
// dfn {
    // font-style: italic;
// }
// mark {
    // background: #ff0;
    // color: #000;
// }
// code,
// kbd,
// pre,
// samp {
    // font-family: monospace, serif;
    // font-size: 1em;
// }
// pre {
    // white-space: pre-wrap;
    // word-wrap: break-word;
// }
// q {
    // quotes: "\201C" "\201D" "\2018" "\2019";
// }
// small {
    // font-size: 80%;
// }
// sub,
// sup {
    // font-size: 75%;
    // line-height: 0;
    // position: relative;
    // vertical-align: baseline;
// }
// sup {
    // top: -0.5em;
// }
// sub {
    // bottom: -0.25em;
// }
// img {
    // max-width: 100%;
    // padding: 2px;
    // border: 3px solid var(--fg);
// }
// svg:not(:root) {
    // overflow: hidden;
// }
// figure {
    // margin: 0;
// }
// fieldset {
    // border: 1px solid $gray;
    // margin: 0 2px;
    // padding: 0.35em 0.625em 0.75em;
// }
// legend {
    // border: 0;
    // padding: 0;
// }
// button,
// input,
// select,
// textarea {
    // font-family: inherit;
    // font-size: 100%;
    // margin: 0;
// }
// button,
// input {
    // line-height: normal;
// }
// button {
    // cursor: pointer;
// }
// button[disabled],
// input[disabled] {
    // cursor: default;
// }
// textarea {
    // overflow: auto;
    // vertical-align: top;
// }
// table {
    // border-collapse: collapse;
    // border-spacing: 0;
// }
// table, th, td {
    // border: 1px solid $gray;
    // padding: 5px 10px 5px 10px;
// }
// html {
    // font-family: 'Fira Sans', sans-serif;
// }
// pre,
// code {
    // font-family: 'Fira Code', monospace;
// }
// h1,
// h2,
// h3,
// h4,
// h5,
// h6 {
    // font-family: 'Fira Sans', sans-serif;
    // font-weight: 700;
    // margin-bottom: 0.5em;
    // margin-top: 0em;
// }
// html {
    // background-color: $bg1;
    // color: $fg;
    // margin: 1em;
    // // background-image: repeating-linear-gradient(90deg, $bg2, $bg2 1px, transparent 1px, transparent 7px);
    // // background-size: 16px;
// }
// body {
    // background-color: $bg;
    // margin: 0 auto;
    // max-width: 30cm;
    // border: 1pt solid $fg;
    // padding: 1em;
// }
// code {
    // background-color: $bg1;
    // padding: 2px;
// }
// a {
    // color: $dorange;
    // text-decoration: underline;
// }
// a:hover {
    // color: $borange;
    // text-decoration: underline;
// }
// h1,
// h2,
// h3 {
    // color: $purple;
// }
// h4,
// h5 {
    // color: $aqua;
// }
// h6 {
    // color: $blue;
// }
// pre {
    // background-color: $bg;
    // color: $fg;
    // border: 1pt solid $gray;
    // padding: 1em;
    // box-shadow: 5pt 5pt 8pt $bg1;
// }
// pre code {
    // background-color: $bg;
// }
// h1 {
    // font-size: 2.2em;
// }
// h2 {
    // font-size: 2em;
// }
// h3 {
    // font-size: 1.8em;
// }
// h4 {
    // font-size: 1.4em;
// }
// h5 {
    // font-size: 1.3em;
// }
// h6 {
    // font-size: 1.1em;
// }
// header {
    // clear: both;
    // padding: 0;
    // margin: 0;
    // font-size: 0.9em;
    // width: 100%;
    // text-decoration: none;
    // font-weight: bold;
// }
// header a, header a:hover {
    // text-decoration: none;
// }
// #menu {
    // clear: both;
    // display: block;
    // width: 100%;
    // margin: 0 0 1em 0;
    // color: $bg;
    // background-color: $fg;
    // overflow: hidden;
// }
// #menu a {
    // display: block;
    // float: left;
    // padding: 5px 10px 5px 10px;
    // color: $bg;
// }
// #menu a:hover {
    // color: $borange;
    // // background-color: $bg;
// }
// @media screen and (max-width: 500px) {
    // header {
        // font-size: 0.7em;
    // }
    // #menu a {
        // padding: 3px 5px 3px 5px;
    // }
// }
// @media screen and (max-width: 400px) {
    // header {
        // font-size: 0.5em;
    // }
    // #menu a {
        // padding: 2px 5px 2px 5px;
    // }
// }
// #main {
    // margin: 0;
    // padding: 0;
// }
// blockquote {
    // border-left: 5px solid $purple;
    // margin: 20px 20px 10px 10px;
    // padding: 0px 15px 0px 10px;
// }
// blockquote ul {
    // margin-top: -10px;
    // [>margin-bottom: 0;<]
    // list-style-type: none;
    // padding: 0px 1em 0px 1em;
    // //padding: 0;
// }
// hr {
    // border: 0;
    // border-top: 1px solid $gray;
// }
// footer {
    // clear: both;
    // //border-top: 3px double $gray;
    // padding-top: 10px;
    // padding-bottom: 15px;
    // font-weight: bold;
// }
// footer hr {
    // border: 0;
    // border-top: 3px double $gray;
// }
// footer a {
    // text-decoration: none;
    // color: $dpurple;
// }
// footer a:hover {
    // color: $purple;
    // text-decoration: underline;
// }
// .comment {
    // font-size: 0.75em;
// }
// .paper {
    // padding: 0 0 1em 0;
    // //border-top: 2px solid $gray;
// }
// .paper-title {
    // font-size: 1.2em;
    // font-weight: bold;
// }
// .paper-author {
    // padding: 5px 5px 5px 5px;
    // border-left: 2px solid $fg;
    // margin: 0 0 0 1px;
// }
// .paper-foot {
    // //border-top: 1px solid $gray;
    // padding: 5px 0 0 0;
    // border-bottom: 2px solid $fg;
    // border-left: 2px solid $fg;
    // margin: 0 0 0 1px;
// }
// .paper-foot ul {
    // list-style-type: none;
    // margin: 0;
    // padding: 0;
    // overflow: hidden;
// }
// .paper-foot li {
    // float: left;
    // padding: 1px 5px 1px 5px;
    // border-right: 1px solid $fg;
    // //border-left: 2px solid $fg;
// }
// .paper-abstract {
    // padding: 0px 15px 0px 5px;
    // border-left: 2px solid $fg;
    // margin: 0 0 0 1px;
// }
// .abstract-button {
    // background-color: $fg;
    // //font-weight: bold;
    // color: $bg;
    // cursor: pointer;
    // text-decoration: none;
    // border: none;
    // //padding: 2px 2px 2px 2px;
// }
// .abstract-button:hover {
    // color: $borange;
// }
// .top-button {
    // background-color: $bg;
    // color: $fg;
    // margin: 0 0 0 5pt;
// }
// .top-button a {
    // color: $fg;
    // text-decoration: none;
// }
// .top-button a:hover {
    // color: $purple;
// }
// .row:after {
    // content: "";
    // display: table;
    // clear: both;
// }
// .column {
    // float: left;
// }
// .left {
    // width: 70%;
// }
// .right {
    // width: 30%;
// }
// .pull-left {
    // float: left;
// }
// .pull-right {
    // float: right;
// }
// [> Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other <]
// @media screen and (max-width: 600px) {
    // .column {
        // width: 100%;
    // }
// }
// .bare table {
    // border-collapse: collapse;
    // border: none;
// }
// .bare tr {
    // border: none;
// }
// .bare th, .bare td {
    // border: none;
    // text-align: left;
    // vertical-align: top;
    // padding: 10px;
// }
// .bare th {
    // text-align: right;
// }
// .bare ul {
    // list-style: none;
    // padding: 0;
    // margin: 0;
// }

// .schedule table {
    // width: 100%;
    // text-align: center;

    // .teaching, .meetings, .seminars, .workshops, .office {
        // color: $bg;
    // }
    // .teaching {
        // background-color: $purple;
    // }
    // .meetings {
        // background-color: $red;
    // }
    // .seminars {
        // background-color: $green;
    // }
    // .workshops {
        // background-color: $aqua;
    // }
    // .office {
        // background-color: $yellow;
    // }
// }

// .has-tooltip {
    // position: relative;
// }

// .has-tooltip .tooltip {
    // opacity: 0;
    // visibility: hidden;
// }

// .has-tooltip:hover .tooltip {
    // opacity: 1;
    // visibility: visible;
// }

// .tooltip {
    // background-color: $orange;
    // bottom: 130%;
    // color: $bg;
    // font-size: 70%;
    // left: 0%;
    // width: 110px;
    // padding: 2px;
    // position: absolute;
    // text-align: center;
    // text-decoration: none;
    // text-shadow: none;
    // word-break: normal;
    // line-break: strict;
// }

// @media screen and (max-width: 500px) {
    // .schedule {
        // font-size: 0.7em;
        // table, th, td {
            // padding: 1px 2px 2px 1px;
        // }
    // }
// }
// @media screen and (max-width: 400px) {
    // .schedule {
        // font-size: 0.5em;
        // table, th, td {
            // padding: 0px 0px 0px 0px;
        // }
    // }
// }