:root{
    --grnColor: #134B2975; /* Grenish color */
    --bluColor: #13294B75; /* Bluish color*/
}
/* Formatting the mainContainer ----------------------------------- */
.mainContainer{
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: calc(2*var(--gap));
}
.topMainContainer{
    flex: 1 1 200px;
}
.bottomMainContainer{
    flex: 1 1 200px;
}
/* Formatting the top mainContainer ------------------------------- */
.topMainContainer{
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(2*var(--gap));
}
.aboutMeContainer{
    flex: 1 1 35%;
}
.newsGalleryContainer{
    flex: 1 65%;
}
.aboutMeContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.aboutMeLeftPanel{
    flex: 0 0 10px;
    background-image: linear-gradient(0deg, var(--grnColor), white);
    border-radius: 0px 0px 10px 10px;
}
.aboutMeMainContent{
    flex: 1 1 10px;
}
.aboutMeTitleBox{
    display: flex;
    flex-direction: row;
    justify-content: flex start;
    align-items: stretch;

    text-align: center;
    background-image: linear-gradient(270deg, var(--grnColor), white);
    border-radius: 0px 50px 50px 0px;
    gap: calc(0.2*var(--gap));
    position: relative;
}
.imageSpaceLeft, .imageSpaceRight{
    flex: 0 0 240px;
}
@media screen and (max-width: 750px) {
    .imageSpaceLeft{
        flex: 0 0 130px;
    }
    .imageSpaceRight{
        flex: 0 0 30px;
    }
}
.textSpace{
    flex: 1 1 200px;
}
.aboutMeTitleBox a{
    animation-name: FLICKERING;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-play-state: paused;
}
@keyframes FLICKERING{
    0%{
        font-size: var(--h2-fs);
    }
    50%{
        font-size: 0.95rem;
    } 
    100%{
        font-size: var(--h2-fs);
    }
}
.aboutMeTitleBox:hover a{
    animation-play-state: running;
}

.aboutMeDescriptionBox{
    padding: 0px var(--pad);
    text-align: justify;
    height: 550px;
    overflow-y: auto;
}
.profilePicture{
    border-radius: 100px;
    position: absolute;
    left: 20px;
    bottom: 0px;
    /* border-image: linear-gradient(red,green); */
    box-shadow: 0 0 10px 1px black;
}

.profilePicture:hover{
    width: 210px;
    height: auto;
}
@media screen and (max-width: 750px) {
    .profilePicture{
        width: 120px;
        height: 120px;
    }
    .profilePicture:hover{
        width: 125px;
        height: auto;
    }
}
.newsGalleryContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; 
}
.newsGalleryMainContent{
    flex: 1 1 10px;
}
.newsGalleryRightPanel{
    flex: 0 0 10px;
    background-image: linear-gradient(0deg, var(--bluColor), white);
    border-radius: 0px 0px 10px 10px;
}
.newsGalleryMainContent{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch; 
    gap: var(--gap);
}
.newsGalleryTitleBox{
    flex: 0 0 40px;
}
.newsGalleryTitleBox h1{
    font-size: 1.5rem;
    overflow: hidden;
    animation-name: SCALE;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-play-state: running;
}

@keyframes SCALE {
    0%{
        transform: translate(-40%,0);
        color: var(--uiucBlue);
    }
    100%{
        transform: translate(40%,0);
        color: var(--uiucOrange);
    }
}

.neswGalleryContainerBox{
    flex: 1 1 550px;
}
.newsGalleryTitleBox{
    text-align: center;
    padding: calc(1.05*var(--pad));
    background-image: linear-gradient(90deg, var(--bluColor), white);
    border-radius: 50px 0px 0px 50px;
}
.neswGalleryContainerBox{
    height: 550px;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);
    padding: 0px var(--pad);
    text-align: justify;
}
.news{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);
}
.newsImageBox{
    flex: 0 0 200px;
}
.newsTitle{
    flex: 1 1 100px;
}
.newsImageBox{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.newsImage{
    width: 200px;
    outline: 0.5px solid lightgray;
    border-radius: var(--bdr-rad)
}
.newsImage:hover{
    width: 210px;   
}
.newsTitle > a{
    color: black;
    font-size: 1.1rem;
    font-family: Times;
    font-weight: bold;
    text-decoration: none;    
}
.newsTitle > a > em{
    color: var(--uiucOrange);
    font-size: 1.25rem;
    font-style: normal;
    font-family: Times;
    font-weight: bold;
    text-decoration: none;  
}
.news .newsTitle h3{
    color: #444444;
    background-image: linear-gradient(90deg,white, #FF5F0522, white);
    border-radius: var(--bdr-rad);
    text-align: center;
}
.newsTitle > a:hover{
    font-size: 1.15rem; 
    background-image: linear-gradient(90deg, lightgray, white);
}
.buttonHolder{
    margin-top: 10px;
    background-image: linear-gradient(90deg, lightgray, white);
}
button{
    border: none;
    background: none;
    width: fit-content;
}
button > h4{   
    font-size: 0.8rem;
    font-style: normal;
    text-decoration: none;
    color: var(--uiucBlue);
    background: none;
    padding: 0px 10px;
}
button > a{   
    font-size: 0.8rem;
    font-style: normal;
    text-decoration: none;
    color: black;
    background: none;
    padding: 0px 10px;
}
button > a:hover{   
    font-size: 0.9rem;    
    color: white;
    background: #00000055;
    padding: 0px 10px;
}
@media screen and (max-width: 1700px){
    .topMainContainer{
        flex-direction: column;
    }
    .aboutMeDescriptionBox{
        height: auto;
    }
}
@media screen and (max-width: 750px) {
    .neswGalleryContainerBox{
        gap: calc(3*var(--gap));
    }
    .news{        
        flex-direction: column;
    }
    .newsImage{
        width: 300px;
        height: auto;
    }
    .newsImageBox > a > .newsImage:hover{
        width: 310px;   
    }
}
/* Formatting the bottom mainContainer ------------------------------*/
.bottomMainContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: calc(2*var(--gap));
}
.readingContainer, .imageGallery{
    flex: 1 1 50px;
}
.readingContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; 
    gap: calc(2*var(--gap));
}
.rfbOperation, .transientResponse{
    flex: 1 1 0px;
}
.rfbOperationTitleBox{
    padding: 5px calc(2*var(--pad));
    text-align: center;
    background-image: linear-gradient(180deg, var(--grnColor), white);
    border-radius: 500px 500px 0px 0px;
}
.rfbOperationDescriptionBox{
    padding: var(--pad);
    text-align: justify;

    max-height: 600px;
    overflow-y: auto;
}
.leftWideImage{
    width: min(100%, 500px);
    height: auto;
    float: left;
    padding: var(--pad);
}
.rightWideImage{
    width: min(100%, 500px);
    height: auto;
    float: right;
    padding: var(--pad);
}
.rightSquareImage{
    width: min(70%, 300px);
    height: auto;
    float: right;
    padding: var(--pad);
}
.transientResponseTitleBox{
    padding: 5px calc(2*var(--pad));
    text-align: center;
    background-image: linear-gradient(180deg, var(--bluColor), white);
    border-radius: 500px 500px 0px 0px;
}
.transientResponseDescriptionBox{
    padding: var(--pad);
    text-align: justify;
    
    max-height: 600px;
    overflow-y: auto;
}

.imageGallery{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch; 
    gap: calc(0.5*var(--gap));
}
.imageGalleryTitleBox{
    flex: 0 0 25px;
}
.imageGalleryContainerBox{
    flex: 1 1 100px;
}
.imageGalleryTitleBox{
    padding: 5px var(--pad);
    text-align: center;
    background-image: linear-gradient(180deg, var(--bluColor), white);
    border-radius: 500px 500px 0px 0px;
}
.imageGalleryTitleBox > a > h1:hover{
    font-size: 1.2rem;
}

.galleryImageContainerBox{
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
.galleryImage{
    padding: calc(1*var(--pad));
    border-radius: 10px;
    opacity: 0.6;
}
.galleryImage:hover{
    opacity: 1;
    border: 1px solid lightgray;
}

@media screen and (max-width: 1400px){
    .readingContainer{
        flex-direction: column;
    }
}
@media screen and (max-width: 1000px){
    .galleryImage{
        height: 150px;
        width: auto;
    }
}
@media screen and (max-width: 500px) {
    .rightSquareImage{
        width: 100%;
        height: auto;
    }
    .galleryImage{
        height: 120px;
        width: auto;
    }
}