/* --- 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: About Me --- */
section.about-me {
    background-color: var(--white);
    padding: 40px 0;

}
.avatar {
    border-radius: 50%;
    padding: 5px;
    border: 2px solid var(--green);
    /* width: 200px; */ /*inline */
    margin: 0 20px 10px 0;
    float: left;
}
.about-me p {
    margin: 10px 0;
}

/* --- Main: Upcoming Productions --- */
.upcoming h3 {
    font-style: italic;
}
section.upcoming {
    background-color: var(--lightBlue);
    color: var(--darkBlue);
    padding: 30px 0;
}
section.productions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    justify-content: space-between;
}
section.productions article {
    padding: 10px 0;
}
section.productions p.dates {
    font-size: .85rem;
}
section.productions span.start-date {
    padding-right: 0.4rem;
}
section.productions span.end-date {
    padding-left: 0.2rem;
}
section.productions p.city-state {
    font-size: .9rem;
}
section.productions sup {
    font-size: .6rem;
}

/* --- Main: Selected Projects --- */
section.projects {
    background-color: var(--lightGold);
    color: var(--black);
    padding: 30px 0;
}



/* --- Main: Recent Past Productions --- */
section.recent {
    background-color: var(--lavender);
    color: var(--darkBlue);
    padding: 30px 0;
}



/* --- Responsive --- */
@media(max-width: 760px) {
    article.job-item {
        display: flex;
        flex-direction: column;
    }
    section.job-summary {
        margin-top: 5px;
    }
}