/* --- Color Pallet --- */
:root {
    --black: #060118; /*Xiketic - rgb(6,1,24) */
    --darkBlue: #001268; /*Midnight Blue - rgb(0,18,104) */
    --purple: #4D2087; /*Blue Violet Color Wheel - rgb(77,32,135) */
    --lavender: #EFC9F2; /*Thistle - rgb(239,201,242) */
    --lightBlue: #CCD9FB; /*Periwinkle Crayola - rgb(204,217,251) */
    --grey: #D0CCDD; /*Lavender Gray - rgb(208,204,221) */
    --lightGold: #E7D3B8; /*Almond - rgb(231,211,184) */
    --gold: #FBA924; /*Bright Yellow Crayola - rgb(251,169,36) */
    --green: #627300; /*Avocado - rgb(98,115,0) */
    --white: #FFF5FF; /*Magnolia - rgb(255,245,255) */
}


/* --- General --- */


/* --- Main --- */
main {
    z-index: -1;
}

/* --- Main:Page Title --- */
main section.page-title {
    color: var(--darkBlue);
    position: relative;
    padding: 30px 0;
    z-index: 2;
}
ul.page-title {
    padding-left: 30px;
}


/* --- Main: Projects --- */
article section.background-image {
    position: sticky;
    width: 100vw;
    height: 66vw;
    top: 70px;
    z-index: 1;
}
article img.background {
    width: 100%;
    height: 100%;
}
section.background-image p.photo-credit {
    color: var(--white);
    opacity: 70%;
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 0;
}
article section.project-info {
    width: 100vw;
    height: 66vw;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
section.project-info a.project-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1;
}
section.project-info a.project-link:hover {
    cursor: pointer;
}


/* --- Individual Projects--- */
article section.project-info.dutchOwl {
    background-color: rgba(77,32,135,50%);
}
section.project-info a.project-link.dutchOwl {
    background-color: var(--purple);
    color: var(--lightGold);
}
article section.project-info.measure {
    background-color: rgba(98,115,0,50%);
}
section.project-info a.project-link.measure {
    background-color: var(--green);
    color: var(--lightGold);
}
article section.project-info.saratoga {
    background-color: rgba(0,18,104,50%);
}
section.project-info a.project-link.saratoga {
    background-color: var(--darkBlue);
    color: var(--lightBlue);
}


/* --- Responsive --- */