/*
Color Palette (see palette.txt for more formats):

--eerie-black: #191716ff;
--flame: #cf5c36ff;
--lavender-blush: #eee5e9ff;
--gray-web: #7c7c7cff;
--gold-crayola: #efc88bff;

*/

/*
Font options:
    web-safe, no load time:
        font-family: Geneva, sans-serif;
    fonts.google.com:
        font-family: 'Montserrat', sans-serif;
        font-family: 'Montserrat Alternates', sans-serif;
*/

/* Utility CSS (border box fix and clear-fix)
---------------------------------------------------- */
/* border-box fix from https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* clear-fix from https://css-tricks.com/snippets/css/clear-fix */
/* .group:after {
    content: "";
    display: table;
    clear: both;
  } */
/* Gobal styles
---------------------------------------------------- */
body {
    color: #191716ff;
    margin: 0;
    /* remove space around edge of page */
    padding: 0;
    /* reset default style for all padding */
    /* font-family: Geneva, sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* decrease font size and increase spacing between lines */
    font-size: 15px;
    line-height: 1.5;
}

header {
    font-weight: bold;
    position: relative;
    /* needed to allow background image with absolute position */
}

footer {
    position: relative;
    /* needed to allow background image with absolute position */
}

img {
    width: 300px;
}

a {
    color: purple;
}

a:hover {
    text-decoration: none;
}

/* increase font size for headings h1 and h2 */
h1 {
    font-size: 40px;
}

h2 {
    font-size: 32 px;
}

h1,
h2 {
    font-family: 'Montserrat Alternates', sans-serif;
    font-style: italic;
    /* font: italic bold 'Montserrat Alternates', sans-serif;  */
    margin: 0;
}

/* format work experience and education headings */
h3 {
    margin: 0;
}

.item-details h3+p {
    font-style: italic;
}

.item-details h3~p {
    margin: 0;
}

.content-wrap {
    max-width: 800px;
    width: 85%;
    margin: 0 auto;
    padding: 60px 0;
    opacity: 100%;
}

/* add border between items */
.divider>section {
    border-bottom: 1px dashed #191716ff;
    padding: 25px 0;
}

/* remove border from last item section in divider section */
.divider>section:last-of-type {
    border-style: none;
}

/* NOTE: the image background cover/clip only works if the parent container is positioned (relative, absolute, whatever) -- see header position set above */
.pcb-background {
    max-width: 100%;
}

.pcb-background::after {
    content: "";
    pointer-events: none; /* needed to allow clicks to get through to hyperlinks! */
    background-image: url("../img/circuit-board-photo2.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 5%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: clip;
}

.carousel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.carousel li {
    list-style-type: none;
}
/* Profile
---------------------------------------------------- */
/* Note: other global features of header are also set above */
header {
    background: #cf5c36ff;
}

/* Navigation
---------------------------------------------------- */
.navWrap {
    position: sticky;
    /*  ** note the menu will not be sticky until we add more page content */
    top: 0;
    z-index: 99;
    height: 48px;
    width: 100%;
    background-color: #eee5e9ff;
    border-bottom: 1px solid #e0e5eb;
    /* box-shadow: 0px 1px 8px #223055; */
    padding: 0 1.5rem;
    /* support for logo with menu */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

input#navToggle {
    display: none;
}

input#navToggle~label {
    position: relative;
    padding: 0.25rem;
    width: 2rem;
    height: 1.25rem;
    height: 2rem;
}

input#navToggle~label>span,
input#navToggle~label>span::before,
input#navToggle~label>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.75rem;
    height: 0.125rem;
    width: 1.75rem;
    opacity: 1;
    /* background: #fff; */
    background: #191716ff;
    transition: 0.14s ease-in-out;
}

input#navToggle~label>span::before {
    top: -0.5rem;
}

input#navToggle~label>span::after {
    top: 0.5rem;
}

#navToggle:checked~label>span {
    width: 0;
    /* background: rgba(18, 18, 18, 0); */
    background: #3C1321;
}

#navToggle:checked~label>span::before {
    transform: rotateZ(45deg);
    top: 0;
}

#navToggle:checked~label>span::after {
    transform: rotateZ(-45deg);
    top: 0;
}

#navToggle:checked~nav {
    left: 0;
    /* bring nav on screen when checked */
}

nav {
    position: absolute;
    z-index: -1;
    top: 3rem;
    left: -110%;
    width: 100%;
    transition: 0.22s ease-in-out;
}

nav::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    height: 22rem;
    width: 100vw;
    /* background-color: #13b1e7; */
    background-color: #3C1321;
    background-size: cover;
}

nav ul {
    list-style-type: none;
}

nav ul li a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    padding: 0.75rem 1rem;
    color: #fff;
    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
    transition: 0.14s ease-in-out;
}

nav ul li a:hover {
    /* color: #36bae6; */
    /* background: #e0e5eb; */
}

nav ul li:last-of-type::before {
    content: "";
    display: block;
    padding: 1rem;
}

@keyframes spinner {
    100% {
        transform: rotateZ(360deg);
    }
}

.logo {
    height: 32px;
    opacity: 50%; /* make black SVG appear grey */
    animation: spinner 30s ease-in-out infinite;
}

.navbutton {
    position: relative;
    width: 32px;
    left: -50%;
}

/* set the margin-left on second nav item to cause menu items to take up space to the right */
/*   see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container */
.push {
    margin-left: auto;
}

/* Projects
---------------------------------------------------- */
.projects {
    background: #7c7c7cff;
}

.projects .btn {
    color: #eee5e9ff;
    background-color: #191716ff;
    text-decoration: none;
    padding: 8px;
    border-radius: 6px;
    display: inline-block;
}

.projects .btn:hover {
    background: rgba(25, 23, 22, 0.8);
}

.project-item {
    overflow: hidden;
}


/* Work Experience
---------------------------------------------------- */
.work-experience {
    background: #efc88bff;
    /* Apply texture to background color (argyle pattern) */
    /* pattern from: https://projects.verou.me/css3patterns/ */

    background-image:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .02) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(60deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .02) 1px, transparent 1px, transparent 60px),
        linear-gradient(60deg, rgba(0, 0, 0, .02) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02)),
        linear-gradient(120deg, rgba(0, 0, 0, .02) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02));
    background-size: 70px 120px;
}

.job-item {
    margin-top: 8px;
    margin-bottom: 8px;
}

.job-summary p {
    margin-top: 0;
}

/* Education
---------------------------------------------------- */
.education {
    background: repeating-linear-gradient(to right,
            #f6f6e2,
            #f6f6e2 2px,
            #fffff1 1px,
            #fffff1 3px);
}

.education-item {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Contact Info
---------------------------------------------------- */
footer {
    background: #eee5e9ff;
    text-decoration: none;
}

.contact-list {
    list-style-type: none;
    padding: 0;
    z-index: 99;
}

.contact-list a {
    padding: 15px;
    display: inline-block;
    z-index: 9;
}

/* Responsive Design */
@media screen and (min-width: 750px) {
    /* on big screens, add this formatting */

    footer {
        text-align: center;
    }

    header h1,
    h2 {
        text-align: center;
    }

    /* ######### Navigation, Large screen rules ######### */
    .navWrap {
        display: grid;
        justify-content: center;
        height: auto;
    }

    .navToggleLabel {
        display: none;
    }

    nav {
        position: initial;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    nav ul li a {
        text-align: center;
        color: purple;
        border-bottom: none;
    }

    nav ul li a:hover {
        background: transparent;
    }

    nav::after,
    nav ul li:last-of-type::before {
        display: none;
        padding: initial;
    }

    .project-item img {
        float: left;
        margin: 0 24px 24px 0;
    }

    .job-item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 20px;
    }

    .contact-list {
        margin: 0.2em;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* publications.html page-specific settings */
    .publications {
        margin: 10px 100px;
        max-width: 1200px;
    }

    .publications h1 {
        text-align: center;
    }

    .publications h3 {
        padding-top: 15px;
    }
}

@media screen and (max-width: 749px) {

    /* on small screens, add this formatting */
    h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    /* adjust line height for small screens */
    h1,
    h2 {
        line-height: 1;
    }

    /* reduce item height */
    .contact-list li {
        line-height: 18px;
    }

    .contact-list a {
        padding: 5px;
    }

    /* reduce space */
    .content-wrap {
        padding: 30px;
    }
}