#document {
    position: relative;
    margin: 0 auto;
    top: 80px;
    padding-bottom: 100px; /* space for footer */
}

/* hide header by default */
header {
    display: none;
}

@media screen {
	
	/* #refs {
		width: 400px;
		height: 90vh;
		position: fixed;
		top: 20px;
		right: 20px;
		font-size: 12px;
		overflow-y: scroll;
		padding: 20px;
	} */

	/* We can place this anywhere actually, which might be better done with javascript */
	#TOC {
		width: 400px;
		position: fixed;
		top: 100px;
		left: 20px;
		padding: 20px;
	}

}

.print-footer {
    text-align: center;
    position: fixed;
    bottom: 0px;
    background: white;
    width: 800px;
    color: lightgray;
}

@media print {

    hr {
        display: none;
    }
    
    #TOC {
        display: none;
    }

    @page {
        size: A4;
        margin-bottom: 60px; /* space for footer */
    }

    header {
        display: none; /* hide any HTML header */
    }


    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        text-align: center;
    }

    .print-footer .page::after {
        content: "Page " counter(page) " of " counter(pages);
    }

    figure::after {
        /* add a hr after each figure */
        content: "";
        display: block;
        border-bottom: 1px solid lightgrey; 
        margin: 20px 0;
    }

    /* and before each figure */
    figure::before {
        content: "";
        display: block;
        border-bottom: 1px solid lightgrey; 
        margin: 20px 0;
    }

    #nav_bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 114px;
    }

    h1, h2 {
        break-before: page;
    }

    .table {
        page-break-inside: avoid;
    }

    .sourceCode pre {
        page-break-inside: avoid;
    }
	
	/* .citation {
		color: black;
	}

	.citation a {
		color: black;
	}

	a {
		color: black;
	} */
	
}