/* --- 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 {
    background-color: var(--white);
    color: var(--darkBlue);
    z-index: -1;
}

/* --- Main:Page Title --- */
main section.page-title {
    position: relative;
    padding: 30px 0;
    z-index: 2;
}



/* --- Main: Projects --- */
main section.project-examples {
    width: 100%;
    position: relative;
    padding: 30px 0;
    z-index: 2;
}
section.project-examples a.project-link {
    width: 100%;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px;
}
section.project-examples div.project-image {
    width: 100%;
    position: relative;
}
section.project-examples img.project-image {
    position: relative;
    width: 100%;
}
section.project-examples p.project-image.credit {
    position: absolute;
    background-color: var(--white);
    color: var(--black);
    opacity: 50%;
    bottom: 5px;
    left: 5px;
    padding: 0 2px;
}


/* --- Individual Projects--- */


/* --- Responsive --- */
@media(min-width: 500px) {
    section.project-examples a.project-link {
        width: 60%;
    }
    section.project-examples p.project-image.credit {
        bottom: 10px;
        left: 10px;
    }
}