/* Global defines */
:root {
    --TitleColor: #003399;
    --ProfilePicBorderColor: #003399; /* RPI red */
    --SubtitleColor: #003399;
    --WhoIAmColor: #003399;
    --MenuBkgdColor: #003399;
    --MenuTextColor: lightcyan;
    --MenuOutlnColor: lightcyan;
    --MenuSelBkgdColor: lightcyan;
    --MenuSelTextColor: #003399;
    --MenuSelOutlnColor: #003399;
}

/* ****************************************************************************************** */
/* ************************ TOP PORTION OF EACH MENU PAGE *********************************** */
/* ****************************************************************************************** */
div.Header {
    background-color: skyblue;
    background-image: url("MyHome.jpg");
    background-clip: border-box;
    background-position: center center;
    border-style: none;
    height: 560px;
    margin: -32px -8px -4px -8px;
    .Title {
    color: var(--TitleColor);
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    }
    .Subtitle {
        color: var(--SubtitleColor);
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    .Welcome {
        color: var(--WelcomeColor);
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }

    .WhoIAm {
        color: var(--WhoIAmColor);
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
}
/* ****************************************************************************************** */

/* ****************************************************************************************** */
/* ************************** MENU LIST ON EACH MENU PAGE *********************************** */
/* ****************************************************************************************** */
    ul.Menu {
        list-style-type: none;
        margin: auto;
        overflow: hidden;
        font-weight: bold;
        width: 720px;
    }

    li.Menu {
        float: left;
        display: inline;
        padding: 0px 6px;
    }

    li a {
        display: block;
        background-color: var(--MenuBkgdColor);
        color: var(--MenuTextColor);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        border: 2px solid var(--MenuOutlnColor);
    }

    /* Change the link color on hover */
    li a:hover {
        border: 2px solid var(--MenuSelOutlnColor);
        background-color: var(--MenuSelBkgdColor);
        color: var(--MenuSelTextColor);
    }

/* ****************************************************************************************** */
/* ************************ PROJECT/JOBS/EXPERIENCES IMAGE GALLERIES  *********************** */
/* ****************************************************************************************** */
    div.gallery {
        margin: 8px;
        border: 2px solid #ccc;
        float: left;
        width: 300px;
    }

        div.gallery:hover {
            border: 2px solid #003399;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

    div.desc {
        padding: 5px;
        text-align: center;
    }
/* ****************************************************************************************** */