:root{
    --orgColor: #FF5F0575; /* Orangish color */
    --grnColor: #134B2975; /* Grenish color */
    --bluColor: #13294B75; /* Bluish color*/
}
.mainContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);  
}
.leftPanel{
    flex: 0 0 200px;
}
.rightContainer{
    flex: 1 1 10px;
}

.leftPanel{
    background-image: linear-gradient(90deg,var(--bluColor),white);
    border-radius: 0px 50px 50px 0px;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 50px;
}
.leftPanel > .leftPanelTitle{
    color: var(--buetColor);
    text-decoration: none;
    font-family: Verdana;
    text-decoration: none;
    font-size: 1rem;
    padding: 2px 20px;
    text-decoration: underline;
}
.leftPanel > a{
    color: var(--uiucBlue);
    text-decoration: none;
    font-family: Verdana;
    text-decoration: none;
    font-size: 1rem;
    padding: 10px 10px 10px 20px;
}
.leftPanel > a:hover{
    border-radius: 0px 50px 50px 0px;
    color: white;
    background-color: var(--grnColor);
}




.rightContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: var(--gap);
    padding: var(--pad);
    
}
.workImageGallery, .otherSourcesGallery{
   flex: 1 1 200px; 
   border-bottom: 1px dotted var(--uiucBlue);
}
.workImageGallery, .otherSourcesGallery{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    padding-bottom: var(--pad);
}
.workImageContainer, .otherSourceImageContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap);
}
.galleryImage{
    padding: var(--pad);
    border: 1px dotted lightgray;
    border-radius: 20px;
}
@media screen and (max-width: 1100px){
    .mainContainer{        
        flex-direction: column;
    }
    .workImageContainer, .otherSourceImageContainer{
        display: inline-block;
        text-align: center;
    }
    .leftPanel{
        flex: 0 0 15px;
        border-radius: 50px;
        margin-bottom: 20px;
        background-image: linear-gradient(180deg, var(--bluColor), white);

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0px calc(0.5*var(--pad));
    }
    .galleryImage{
        width: min(100%, 300px);
        height: auto;
    }
}

@media screen and (max-width: 500px) {
    .leftPanel > a, .leftPanel > .leftPanelTitle{
        font-size: 0.75rem;
        padding: 10px;
    }
}