/* Variable decraling -----------------------------*/
:root{
    /* page properties */
    --pageMargin: 0px;        /* page margin*/
    --pagePadding: 0px;       /* page padding*/

    /* h1 properties */
    --h1-fs: 1.1rem;          /* font size */
    --h1-tc:black;          /* text color */
    --h1-ff: Verdana;         /* font family */
    --h1-td: none;            /* text decoration */
    --h1-fw: normal;          /* font width */
    --h1-fst: normal;         /* font style*/

    /* h2 properties */
    --h2-fs: 0.9rem;          /* font size */
    --h2-tc: #3b444b95;     /* text color */
    --h2-ff: Verdana;         /* font family */
    --h2-td: none;            /* text decoration */
    --h2-fw: normal;          /* font width */
    --h2-fst: normal;         /* font style*/

    /* h3 properties */
    --h3-fs: 1rem;            /* font size */
    --h3-tc: teal;          /* text color */
    --h3-ff: Times;           /* font family */
    --h3-td: none;            /* text decoration */
    --h3-fw: normal;          /* font width */
    --h3-fst: normal;         /* font style*/

    /* h4 properties */
    --h4-fs: 0.85rem;         /* font size */
    --h4-tc: #3b444b95;     /* text color */
    --h4-ff: Verdana;         /* font family */
    --h4-td: none;            /* text decoration */
    --h4-fw: normal;          /* font width */
    --h4-fst: normal;         /* font style*/

    /* Equation font size*/
    --eqn-fs: 0.9rem;         /* absed on h2 font size */

    /* anchor properties */
    --anc-tc: green;        /* text color */
    
    /* navigation properties */
    --nav-fs: 1rem;           /* font size */
    --nav-tc: white;        /* text color */
    --nav-ff: Arial;          /* font family */
    --nav-td: none;           /* text decoration */
    --nav-fw: normal;         /* font width */
    --nav-fst: normal;        /* font style*/
    --nav-pd: 10px;           /* padding */
    --nav-br: 10px;           /* border radius */

    /* other properties */
    --gap: 20px;              /* gap */
    --pad: 20px;              /* padding */
    
    /* border properties */
    --bdr-thk: 1px;           /* border thickness */
    --bdr-typ: solid;         /* border color */
    --bdr-clr: #80808080;   /* border color */
    --bdr-rad: 20px;          /* border radius */

    /* Color code for UIUC and BUET*/
    --buetColor: #AA2028;   /* BUET color */
    --uiucOrange: #FF5F05;  /* UIUC orange */
    --uiucBlue: #13394B;    /* UIUC blue*/

    --fac-def: 1;             /* default factor */
}
/* Text type (h1, h2, h3 and h4) formating --------*/
h1{
    font-size: var(--h1-fs);
    color: var(--h1-tc);
    font-family: var(--h1-ff);
    text-decoration: var(--h1-td);
    font-weight: var(--h1-fw);
    font-style: var(--h1-fst);
}
h2{
    font-size: var(--h2-fs);
    color: var(--h2-tc);
    font-family: var(--h2-ff);
    text-decoration: var(--h2-td);
    font-weight: var(--h2-fw);
    font-style: var(--h2-fst);
}
h3{
    font-size: var(--h3-fs);
    color: var(--h3-tc);
    font-family: var(--h3-ff);
    text-decoration: var(--h3-td);
    font-weight: var(--h3-fw);
    font-style: var(--h3-fst);
}
h4{
    font-size: var(--h4-fs);
    color: var(--h4-tc);
    font-family: var(--h4-ff);
    text-decoration: var(--h4-td);
    font-weight: var(--h4-fw);
    font-style: var(--h4-fst);
}
.MathJax{
    font-size: calc(0.8*var(--eqn-fs)); /* Equation font are litle bigger */
}
/* Paragrapg formating ----------------------------*/
p:first-letter{
    font-size: calc(1.5*var(--h2-fs));
    font-style: italic;
}
p > a{
    color: var(--uiucBlue);    
    text-decoration: var(--h2-td);
}
p > a:hover{
    color: white;    
    background-color: #00000099;
    border-radius: calc(0.2*var(--bdr-rad));
}
/* Listing formats --------------------------------*/
ul, ol{
    padding-left: var(--pad);
    color: var(--h4-tc);
    font-family: var(--h4-ff);
    font-size: var(--h4-fs);
    text-decoration: var(--h4-td);
    font-weight: var(--h4-fw);
}
li{
    padding: calc(0.25 * var(--pad)) 0px;
}
/* Creating the basic layout ----------------------*/
*{
    margin: var(--pageMargin);
    padding: var(--pagePadding);
    box-sizing: border-box;
}
.wrapper{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap);
}
.header{    
    flex: 1 1 250px;    
}
.mainContainer{
    flex: 100 100 500px;
}
.footer{
    flex: 1 1 25px;
}
/* Formating the Header -------------------------- */
.header{    
    background-color: #FF5F0565;
    background-image: url("All_Media_Files/All_Images/Cover_Photos/Background_1.png");
    background-blend-mode: multiply;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.headerNavigationContainer{
    flex: 0 0 10px;
}
.headerTextContainer{
    flex: 1 1 250px;
}
.headerNavigationContainer{
    border-bottom: 1px solid var(--uiucBlue);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: var(--header-navigation-location,center);
    align-items: stretch;
}
.headerNavigationButton{ 
    color: var(--nav-tc);
    font-family: var(--nav-ff);
    text-decoration: var(--nav-td);
    font-weight: var(--nav-fw);
    font-style: var(--nav-fst);
    border-radius: var(--nav-br);
    /* responssive font size and padding for nav buttons */
    @media screen and (max-width: 700px){
        --fac-txt: 0.85;
        --fac-pdg: 0.75;
    }
    @media screen and (max-width: 510px){
        --fac-txt: 0.70;
        --fac-pdg: 0.5;
    }
    @media screen and (max-width: 360px){
        --fac-txt: 0.5;
        --fac-pdg: 0.2;
    }
    font-size: calc(var(--fac-txt,var(--fac-def))*var(--nav-fs));
    padding: calc(var(--fac-pdg,var(--fac-def))*var(--nav-pd));
}
.headerNavigationButton:hover{
    color: var(--uiucOrange);
    background-color: var(--uiucBlue);
    @media screen and (max-width: 700px){
        --fac-txt: 0.85;
        --fac-pdg: 0.75;
    }
    @media screen and (max-width: 510px){
        --fac-txt: 0.70;
        --fac-pdg: 0.5;
    }
    @media screen and (max-width: 360px){
        --fac-txt: 0.5;
        --fac-pdg: 0.2;
    }
    font-size: calc(1.1*var(--fac-txt,var(--fac-def))*var(--nav-fs));
}
.headerTextContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: calc(1*var(--pad));
    padding-bottom: 0px;
}
.quoteTexts{
    flex: 1 1 0px;
}
.photoCredit{
    flex: 0 0 10px;
}
.quoteTexts{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.quoteTexts > .theQuote{
    color: #808080;
    font-style: normal;
    text-align: justify;
    /* responssive font size for the quote */
    @media screen and (max-width: 1000px){
        --fac-txt: 0.8;
    }
    @media screen and (max-width: 800px){
        --fac-txt: 0.6;
    }
    @media screen and (max-width: 650px){
        --fac-txt: 0.45;
    }
    @media screen and (max-width: 500px){
        --fac-txt: 0.35;
    }
    @media screen and (max-width: 370px){
        --fac-txt: 0.3;
    }
    font-size: calc(var(--fac-txt,var(--fac-def))*var(--QUOTE-FS,2rem));
}
.quoteTexts > .theSayer{
    color: #80808080;
    font-style: normal;
    text-align: left;
    /* responssive font size for the sayer */
    @media screen and (max-width: 1000px){
        --fac-txt: 0.9;
    }
    @media screen and (max-width: 800px){
        --fac-txt: 0.8;
    }
    @media screen and (max-width: 650px){
        --fac-txt: 0.65;
    }
    @media screen and (max-width: 500px){
        --fac-txt: 0.5;
    }
    @media screen and (max-width: 370px){
        --fac-txt: 0.45;
    }
    font-size: calc(var(--fac-txt,var(--fac-def))*var(--SAYER-FS,1.5rem));
}
.photoCredit{
    border-top: 1px solid #80808080;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}