// Make figures looks nice
figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}
figure img {
    max-width: 900px;
    width: 100%;
    margin-bottom: 2em;
}
figcaption {
    aria-hidden: true;
    max-width: 700px;
}

// For the table of contents, should probably put this in a container

//For the animation that plays in the nav as you scroll
nav.page-table-of-contents a {
    transition: all 200ms ease-in-out;
    color: #000;
    font-weight:normal;
}

nav.page-table-of-contents li.active > a {
    color: #000!important;
    font-weight:bold;
  }

// modify the spacing of the various levels
li {
    margin-bottom: 0.2em;
}

main > ul > li {
    margin-top: 1em;
}

main > ul > ul > li {
    margin-top: 0.5em;
}

// Pull the citations a little closer in to the previous word
span.citation {
    margin-left: -1em;

    a {
        text-decoration: none;
        color: darkblue;
    }
}

// Mess with the formatting of the bibliography
div.csl-entry {
    margin-bottom: 0.5em;
}
div.csl-entry a {
//     text-decoration: none;
        text-decoration: none; 
        color: darkblue;
}

div.csl-entry div {
    display: inline;
}

header li {
    list-style: none;
    a {
        text-decoration: none;
        margin-bottom: 0.5em;
        display:block;
        
    }
}

nav.overall-table-of-contents > ul {
    padding-inline-start: 0px;
    

    > li {
        list-style: none;
        margin-top: 1em;
    }
}

// Page header
div#page-header {
    //make the header sticky, I don't really like how this looks but it's fun to play with
    // position: sticky;
    // top: 0px;
    // background: white;
    // z-index: 10;
    // width: 100%;
    p { margin-block-end: 0px;}
}