main{
    font-size: 1.25rem;
    width: min(800px,90%);
    margin-inline:auto;
    text-align: justify;

    .imgBorder {
        max-width: 100%;

        &>img.blurry {
            width: 105%;
            margin: -2.38%;
        }

        &>img {
            height: 100%;
        }
    }

    a {
        text-decoration: none;
        &:hover, &:focus {text-decoration: underline}
    }



    .imageDescriptionHolder {
        --width: unset;
        --float: unset;
        --margin: unset;

        max-width: 100%;
        width: var(--width, 300px);
        float: var(--float, right);
        clear: var(--float, right);
        margin: var(--margin,0 0 1rem 2rem);

        display: block;
        text-align: center;
        font-size: 0.8em;
        font-style: italic;

        text-wrap-style: pretty;


        p {
            margin: 0;
        }


        img, video {
            margin-bottom: 0.5em;
            width: 100%;
            object-fit: contain;

            &::before {
                content: '';
                background-color: black;
                height: 100%;
                width: 100%;
                display: block;
            }
        }


        .attribution,
        .licensing {
            text-wrap: nowrap;
        }


    }
    .imageGrid {
        --columns: 2;
        display: grid;
        align-items: center;
        justify-items: center;

        width: var(--width, 100%);
        float: var(--float, none);
        margin: var(--margin,0 auto 0 auto);

        grid-template-columns: repeat(var(--columns),1fr);
        gap: 1em;
        margin-block-end: 1em;
        >* {margin: 0}
        >.imageDescriptionHolder{--width: 100%;}


        .grid-text {
            grid-column: 1 / -1;
            font-size: 0.8em;
            font-style: italic;
            text-align: center;
            &>p {margin: 0;}
        }
    }
}

.page-title-and-previous-container {
    >* {display: block}
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;
    justify-content: center;

    margin-block-end: 2rem;
    gap: 2rem;

    >:nth-child(3n) {
        justify-self: end;
    }

    .titleContainer {
        max-width: 35rem;
    }

    .previousLink {
        text-wrap: nowrap;
    }

    h1 {
        text-wrap: balance;
    }


    .previousArrow {
        display: inline-block;
        width: 1lh;
        aspect-ratio: 1;
        text-align: center;
        transform: rotate(-90deg);
    }
}

.previousLink {width: fit-content;height: min-content;}


h1 + p,
h2 + p,
h3 + p {
    margin-block-start: 0;
}

h1, h2, h3, h4, h5, h6, p {
    small {font-size: 60%}
}

h1 {
    text-align: center;
    font-weight: 800;
    margin-block: 0;
    font-size: 2.5rem;
}
h2 {
    font-size: 2rem;
    margin-block-start: 2rem;
    margin-block-end: 0.75rem;
    font-style: italic;
}
h3 {
    font-size: 1.5rem;
    font-style: italic;
    text-indent: 1rem;
    margin-block-start: 1rem;
    margin-block-end: 0.5rem;
}

.subheading {
    width: 100%;
    text-align: center;
    font-size: 0.75em;
    font-style: italic;
    font-weight: 600;
    margin-block-end: 0;
}


.light-theme .seo img {
    filter: invert(1);
}

.seo {
    border-radius: 5px;
    padding: 5px;
    &:hover, &:focus, &:active {
        text-decoration: none;
        outline: 2px currentColor solid;
    }

    img {
        display: inline-block;
        height: 3em;
        width: auto;
        vertical-align: middle;
        margin-inline-start: 0.15em;
        border-radius: 0.2em;

        transition: filter var(--theme-transition-duration) var(--theme-transition-function);
    }

    .seo img+* {
        margin-inline-start: 0;
    }
}




.taxonomy-container {
    float: left;
    padding-inline-start: 1rem;
    padding: 1.5rem;
    margin-inline-end: 2rem;
    margin-block-end: 1rem;

    border-radius: 15px;

    background-color: var(--gray-one);

    .taxonomy {
        font-size: 1.4rem;
        font-style: italic;
        font-weight: 500;
    }
}


#citations {
    .reversefootnote {display: none};
}


#citations, #notes {
    margin-block-start: 2em;
}


a[citation] {
    &::after{
        content: '['attr(citation)']';
    }
}

a[note] {
    &::after{
        content: '['attr(note)']';
    }
}

blockquote {
    font-style: italic;
    line-height: 1.5;
}





.species-item {
    padding: 2rem;
    margin-block-end: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    border-block: 1px solid;

    /*background-color: var(--gray-one);
    border-radius: 15px;*/

    .species-name {
        margin-block-start: 1.5rem;
        font-style: normal;
    }


    .image-container {
        display: flex;
        align-items: center;
        justify-content: center;

        /*float: right;
        margin-inline-start: 2em;*/

        min-width: 200px;
    }

    img {
        float: right;
        max-height: 200px;
        max-width: 200px;
        &.awaiting-photo {display: none}
    }
}


.species-text {
    >:first-child {margin-block-start: 0}
    >:last-child {margin-block-end: 0}
    flex-grow: 1;

    >h2 {
        margin-block-end: 1.5rem;
    }

    &>:not(p,h1,h2,h3,h4,h5,h6,ul,li,a) {
        display: none;
    }
}




#all-species{
    margin-inline: auto;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    grid-auto-rows: 1fr;


    &>a {
        background-color: var(--gray-one);
        border-radius: 15px;
        padding: 2em;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3rem;

        cursor: pointer;
        color: var(--text-color);
        text-decoration: none;

        .species-name {
            font-size: 1.5rem;
            font-weight: 500;
            flex-grow: 1;
            text-align: left;
            text-wrap: pretty;

            .sci-name {
                font-style: italic;
                font-weight: initial;
                font-size: 0.85em;
            }

            .see-gallery-text {
                font-size: 0.7em;
                margin-inline-start: 1.5em;
                font-style: italic;
                font-weight: initial;
                position: absolute;
                color: var(--accent-color);
                text-decoration-color: var(--accent-color);

                transition: opacity 0.1s ease-in-out;
            }
        }

        .image-container {
            display: flex;
            align-items: center;
            justify-content: center;

            /*float: right;
            margin-inline-start: 2em;*/

            min-width: 100px;
        }

        img {
            float: right;
            max-height: 100px;
            max-width: 100px;

            &.awaiting-photo {
                display: none
            }
        }


        &:not(:hover, :focus, :has(:focus), :active) {
            .see-gallery-text {opacity: 0}
        }
    }


}





h1, h2, h3, h4, h5, h6,
.imageDescriptionHolder, .imageGrid,
.taxonomy, .subheading, blockquote {
    em {font-style: normal;}
}