body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
}

img {
    display: block;
}

.inline-img-left {
    display: inline;
    float: left;
    margin-right: 1rem;
}


.inline-img-right {
    display: inline;
    float: right;
    margin-left: 1rem;
}

ruffle-object, object, embed {
    display: block;
}

#text-container {
    width: 100%;
}

figure {
    margin: 0;
    padding: 1rem 0 1rem 0;
}

@media screen and (min-width:50rem) {

    #text-container {
        width: 50rem;
        margin: 0 auto;
    }

    figure {
        display: flex;
        border-bottom: 1px solid #aaa;
    }

    figcaption {
        margin: auto 1rem;
    }
}

@media screen and (max-width:50rem) {
    figure img {
        width: 100%;
    }

    .inline-img-left, .inline-img-right, .inline-img {
        width: 100%;
    }

}

#text-container p, table, div {
    line-height: 1.75;
}

h1, h2, h3 {
    line-height: 1.25;
}

video {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

hr {
    border: 1px solid #aaa;
    margin: 0 33%;
}

.table-wrapper {
    overflow: auto;

    background:
        linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
        linear-gradient(90deg, rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0, 0.2), white),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0, 0.2), white) 0 100%;
        
        background-repeat: no-repeat;
        background-color: white;
        background-position: top left, top right, top left, top right;
        background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
        background-attachment: local, local, scroll, scroll;
}

td {
    mix-blend-mode: multiply;
}