#piece-info-container
{
    top: 0;
    width: 29vw;
    flex-grow: 1;
    background-color: gray;
    overflow: auto;
    visibility: hidden;
    direction: rtl; /* blurb scroll bar on left hand of container instead of right */
    z-index: 3;
}

#piece-info
{
    text-align: center;
    direction: ltr; /* undo `direction: rtl;` for elements inside `piece-info-container`. this allows for usual left
                       to right text layout while preserving the left hand side scroll bar in the wrapping container */
}

#close-piece-info
{
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 1vw;
    margin-top: 1vw;
    cursor: pointer;
    direction: ltr; /* undo flipping of outer container for scroll bar*/
}

#piece-info-non-blurb
{
    position: sticky;
    top: 0;
    left: 0;
    background: gray;
}

.piece-info-row
{
    padding-top: 1vh;
    padding-left: 10px;
    padding-right: 10px;
    font-size: calc(5px + .8vw);
    color: white;
}

#piece-info-button-row
{
    padding-top: 1.5vh;
}

#piece-info-position
{
    font-size: calc(10px + 1vw);
}

#piece-title
{
    font-size: min(50px, 3vw);
    font-style: italic;
}

#bio-image
{
    /* 1.15:1 ratio */
    width:  min(17.25vw, 462px);
    height: min(15vw, 400px);
}

#artist-name
{
    font-size: calc(10px + 1vw);
}

#piece-dates
{
    font-size: calc(5px + .7vw);
    display: flex;
    justify-content: space-around;
}

.piece-info-button
{
    margin-left: .5vw;
    margin-right: .5vw;
    font-size: calc(10px + 1.2vw);
    color: white;
}

#referrer-line
{
    font-size: calc(5px + .5vw);
    font-style: italic;
}

#referrer-name
{
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
}

#commentary-label
{
    padding-bottom: 1.5vh;
    padding-top: 1.5vh;
    font-size: calc(10px + 1.1vw);
}

#piece-info-blurb
{
    padding-top: 0;
    font-size: calc(10px + 0.75vw);
    white-space: pre-line; /* ensure \n characters in typescript string defined in config.ts are rendered on page */
    margin-bottom: 50px;
}