:root{
    --orgColor: #FF5F0575; /* Orangish color */
    --grnColor: #134B2975; /* Grenish color */
    --bluColor: #13294B75; /* Bluish color*/
}
.uiucLink{
    color: var(--uiucOrange);
    text-decoration: none;
}
.buetLink{
    color: var(--buetColor);
    text-decoration: none;
}
/* Formating main container */
.mainContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(2*var(--gap));
}
.teachingJobs{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gap);
    padding: var(--pad);
}
.title{
    flex: 0 0 10px;
}
.description{
    flex: 1 1 10px;
}
.coursesTaught{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: calc(3*var(--gap));
    @media screen and (max-width: 750px) {
        flex-direction: column;
        align-items: flex-start;
    }
}
.uiucTeaching, .buetTeaching{
    flex: 1 1 300px;
    max-width: 500px;
}
.uiucTeaching{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--pad);
    gap: var(--gap);
}
.uiucTeachingLeftPanel{
    flex: 0 0 2.5%;
    height: 100%;
    background-color: var(--uiucOrange);
}
.uiucTeachingMainContent{
    flex: 1 0 min(400px,100%);
}
.uiucTeachingMainContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gap);
}
.uiucTeachingTitle{
    color: white;
    font-size: var(--h1-fs);
    text-decoration: none;
    background-image: linear-gradient(90deg,var(--uiucOrange), lightgray);
    padding: calc(0.8*var(--pad));
    border-radius: var(--bdr-rad);
}
.description{
    flex: 1 1 10px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
h2 a,.uiucEm{
    color:var(--uiucOrange);
    font-family: var(--h2-ff);
    font-size: var(--h2-fs);
    text-decoration: var(--h2-td);
    font-weight: var(--h2-fw);
    font-style: var(--h2-fst);
}
h2 a:hover{
    font-size: calc(1.1*var(--h2-fs));
    background-color: #80808080;
    padding: 0px calc(0.2*var(--pad));
    border-radius: calc(0.2*var(--bdr-rad));
}
.buetTeaching{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: calc(1*var(--pad));
    gap: var(--gap);
}
.buetTeachingLeftPanel{
    flex: 0 0 2.5%;
    height: 100%;
    background-color: var(--buetColor);
}
.buetTeachingMainContent{
    flex: 1 0 min(400px,100%);
}
.buetTeachingMainContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gap);
}
.buetTeachingTitle{
    color: white;
    font-size: var(--h1-fs);
    text-decoration: none;
    background-image: linear-gradient(90deg,var(--buetColor), lightgray);
    padding: calc(0.8*var(--pad));
    border-radius: var(--bdr-rad);
}
h2 a,.buetEm{
    color:var(--buetColor);
    font-family: var(--h2-ff);
    font-size: var(--h2-fs);
    text-decoration: var(--h2-td);
    font-weight: var(--h2-fw);
    font-style: var(--h2-fst);
}
.checkMark{
    color: red;
    font-size: var(--h3-fs);
    font-weight: bold;
}
.buttonContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--pad);
    @media screen and (max-width: 750px) {
        justify-content: flex-start; 
    }
}
.button{
    flex: 0 0 min(320px,100%);
    text-align: center;
    padding: calc(0.5*var(--pad)) var(--pad);
    border-radius: var(--bdr-rad);
    border: 1px solid var(--uiucBlue);
    background-color: var(--grnColor);
}
.button a, h1, h2{
    text-decoration: none;
}
.button:hover a > h2{
    font-size: calc(1.1*var(--h2-fs));
}















/*  ---  */
.otherResourceGallery{
    padding: var(--pad);
    display: flex;
    flex-direction: column;    
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);
}
.otherResourceHeading{
    flex: 0 0 15px;
    background-image: linear-gradient(90deg, white, #00000085, white);
    border-radius: var(--bdr-rad);
    text-align: center;
    padding: var(--pad);
}
.otherResourceContainer{
    flex: 1 1 100px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: space-between;
    gap: calc(3*var(--gap));
}
.channelBox{
    flex: 1 1 45%;
    max-width: 500px;
    min-height: 200px;
    min-width: 400px;
    border-bottom: 5px solid lightgray;
    border-radius: var(--bdr-rad);
    padding: calc(0.5*var(--pad)) var(--pad);
    background-image: linear-gradient(lightgray, white);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(0.5*var(--gap));
}
.channelName{
    flex: 0 0 15px;
    color: var(--buetColor);
    text-align: center;
    font-size: var(--h1-fs);
    font-family: var(--h1-ff);
}
.channelVideos{
    flex: 1 1 200px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    gap: calc(0.5*var(--gap));
}
.channelVideos > a{
    flex: 1 0 45%;
    min-width: 225px;
    border-radius: calc(0.2*var(--bdr-rad));
    background-image: linear-gradient(90deg, white, #00000015);

    color: black;
    font-size: var(--h2-fs);
    font-family: var(--h2-ff);
    text-decoration: none;
    text-align: left;
}

.channelVideos > a:hover{
    color: var(--buetColor);
    font-size: calc(1.1*var(--h2-fs));
    background-color: var(--bluColor);
}


#threeBlueOneBrownBox{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(0.5*var(--gap));

    background-image: url("All_Media_Files/All_Logos/3B1B_Logo.jpg");
    background-size: auto;
}

.columnsIn3B1B{
    flex: 1 1 30%;

    min-width: 120px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(0.5*var(--gap));
    text-align: left;
    background-image: linear-gradient(90deg, white, #00000055);
    border-radius: calc(0.5*var(--bdr-rad));
    padding: calc(0.5*var(--pad)) var(--pad);
}

.linearAlgebra a{
    color: black;
    
    padding: 10px;
    font-size: var(--h2-fs);
    font-family: var(--h2-ff);
    text-decoration: none;
    text-align: left;
}
.listOfClasses{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
}
.otherChannelBox{
    justify-content: center;
    max-height: 200px;
}
.otherChannelBox a{
    text-decoration: none;
}
.otherChannelBox a:hover h1{
    font-size: calc(1.1*var(--h1-fs));
    color: var(--buetColor);
}
.channelAnchors{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}





.recommendedVideoTitle{
    flex: 0 0 15px;
    background-image: linear-gradient(90deg, white, var(--buetColor), white);
    border-radius: var(--bdr-rad);
    text-align: center;
    padding: var(--pad);
}
.recommendedVideos{
    padding: var(--pad);
}

.recommendedVideos li{
    padding: 20px 0px;
}
.recommendedVideos a{
    color: black;
    
    padding: 10px;
    font-size: var(--h2-fs);
    font-family: var(--h2-ff);
    text-decoration: none;
    text-align: left;
    border-radius: 20px;
}
.recommendedVideos a:hover{
    color: white;
    background-color: gray;
}