:root{
    --orgColor: #FF5F0575; /* Orangish color */
    --grnColor: #134B2975; /* Grenish color */
    --bluColor: #13294B75; /* Bluish color*/
    --tileBack: #EBEEF3;
}
/* formating main container */
.mainContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
    padding: 0px var(--pad);
    gap: calc(2*var(--gap));
    @media screen and (max-width: 1000px){
        flex-direction: column;
    }
}
.uiucLectureContainer{
    flex: 1 1 10%;
}
.buetLectureContainer{
    flex: 1 1 10%;
}
.uiucLectureContainer, .buetLectureContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gap);
}
.tam335Container, .me330Container, .me247Container, .me243Container, .me201Container, .me160Container{
    border-radius: var(--bdr-rad);
    background-color: var(--tileBack);
    padding: var(--pad);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gap);
}
.uiucTopBar{
    flex: 0 0 min(10px, 10%);
    background-image: linear-gradient(90deg, var(--uiucOrange), #EBEEF3);
    width: 85%;
    align-self: flex-start;
}
.buetTopBar{
    flex: 0 0 min(10px, 10%);
    background-image: linear-gradient(270deg, var(--buetColor), var(--tileBack));
    width: 85%;
    align-self: flex-end;
}
.uiucHeadingText, .buetHeadingText{
    flex: 0.1 0.1 15px;
}
.listOfBooks{
    flex: 1 1 10px;
}
.buttonContainer{
    flex: 1 1 10px;
}
.uiucHeadingText > h1{
    color: var(--uiucOrange);
    text-align: center;
}
.buetHeadingText > h1{
    color: var(--buetColor);
    text-align: center;
}
.buttonContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gap);
}
.linkText{
    flex: 0 10px;
}
.buttonWrapper{
    flex: 1 1 10px;
}
.linkText{
    text-align: center;
}
.buttonWrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    gap: calc(0.5*var(--gap));
}
.buttonWrapper > a{
    flex: 1 0 25%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.button{
    flex: 1 0 25%;
    padding: calc(1*var(--pad));
    border-radius: calc(0.5*var(--bdr-rad));
    font-size: var(--h4-fs);
    border: 1px solid black;
}
.buttonWrapper > a > button:hover{
    color: white;
    background: var(--uiucBlue);
    font-size: calc(1.1*var(--h4-fs));
}