.mainContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);
}
.leftNavigationPanel{
    flex: 0 0 100px;
    @media screen and (max-width: 850px){
        flex: 0 0 10%;      
    }
}
.referenceListContainer{
    flex: 1 1 10px;
}
.leftNavigationPanel{
    display: flex;
    background-color: var(--uiucBlue);
    border-radius: 0px 20px 20px 0px;
    padding: var(--pad);
}
.referenceListContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.referenceListTitle{
    flex: 0 0 10px;
    text-align: center;
    color: var(--h1-tc);
    font-size: var(--h1-fs);
    font-family: var(--h1-ff);
}
.listOfReferences{
    flex: 1 1 10px;
}
ol{
    padding: var(--pad) calc(2*var(--pad));
    list-style-position: outside;
}
li{
    text-align: justify;
    color: var(--h2-tc);
    font-family: var(--h2-ff);
    font-weight: var(--h2-fw);
    padding: calc(0.25 * var(--pad));
    @media screen and (max-width: 650px) {
        --fac-fs: 0.75;
    }
    font-size: calc(var(--fac-fs,var(--fac-def))*var(--h2-fs));
}