@page
{
    background-image: url('/res/common/yellow-chemistry-publishing-silhouette.svg');
    background-position: calc(0% + 1cm + 5px) calc(100% - 1cm - 5px);
    background-size: calc(100% / 3);
    background-repeat: no-repeat;

    size: A4 portrait;
    padding-bottom: 1cm;
    margin: 0cm 0cm 1cm 0cm;

    @footnote
    {
        font-size: small;
        
        float: bottom;
        padding: 0cm 1cm;
        margin-bottom: 10px;
    }

    @bottom-left
    {
        font-size: small;
        font-weight: bold;
        content: counter(page);

        width: fit-content;
        height: fit-content;
        padding: 0px 5px 0px calc(1cm + 5px);
        margin-bottom: 1cm;
    }
    @bottom-center
    {
        font-size: small;
        font-weight: bold;
        content: "\00A9\00A0 2024 Yellow Chemistry Publishing";
        
        width: fit-content;
        height: fit-content;
        margin-bottom: 1cm;
    }
    @bottom-right
    {
        font-size: small;

        height: fit-content;
        padding: 0px calc(1cm + 5px) 0px 5px;
        margin-bottom: 1cm;
    }
}
@media (min-width: 1750px)
{
    main
    {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    main > .contents
    {
        display: block;
    }
    article > .contents
    {
        display: none;
    }
    .main-content
    {
        margin-left: auto;
    }
}
@media not (min-width: 1750px)
{
    main
    {
        flex-direction: column !important;
        align-items: center !important;
    }
    main > .contents
    {
        display: none;
    }
    article > .contents
    {
        display: block;
    }
}

span.footnote
{
    font-style: italic;

    float: footnote;
    padding: 0px 5px;
}
#references p
{
    text-align: left;

    padding-bottom: 5px;
}

main figure
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 3);
}
main figure > img
{
    border-radius: 10px;

    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
}

h1, h2, .secretly-h2, h3
{
    text-align: left;
}
.secretly-h2
{
    font-size: large !important;
    font-weight: bold;
}
h2
{
    margin-top: 0 !important;
}
h2:not(:first-child)
{
    page-break-before: always;
}
main p, main figcaption
{
    text-align: justify;
}
p.math, p.chem
{
    text-align: left;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}