body {
    margin:0 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.3;
}

.body {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    height:100vh;
}

p,ul,ol {
    font-size:1.1rem;
    letter-spacing: .2px;
    line-height: 1.4;
}
h1 {
    font-size:1.5rem;
}
h2 {
    font-size:2rem;
    font-weight:400;
    margin:.25rem 0;
}
h3 {
    
}
h4 {
    
}
h5 {
    
}
h6 {
    
}

/* nav bar */

.header {
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    margin:1rem 0rem;
}

.header-title {
    margin:0;
}

.header-title a {
    text-decoration: none;
    color:#000;
}

.header-title a:hover {
    text-decoration: none;
    color:#FF0099;
}

.hamburger {
    display:none;
}

.header-nav-list {
    list-style: none;
    display: flex;
    gap: 16px;
    margin:0;
    padding:0;
}

.header-nav-list-item a, a { 
    color:#FF0099;
    text-decoration: none;
}

.header-nav-list-item.active a { 
    color:#FF0099;
    text-decoration: none;
    font-weight: 900;    
}  

.header-nav-list-item a:hover, a:hover { 
    color:#880052;
} 

.menu-toggle {
    display: none;
}

/* Footer */

.footer {
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    margin:6rem 0rem 1rem 0rem;
}

.footer-note {
    color:#6d6d6d;
    font-size:1rem;
}

/* body */

.section {
    margin:0 auto;
    max-width:700px;
    margin-bottom:1.5rem;
}

.section-header {
    margin:0 auto;
    max-width:700px;
    margin-bottom:.5rem;
}

.section-content {
    margin:.5rem 0 0 0;
    color:#474747;
}

.section-list {
    color:#474747;    
    list-style-type: "——";
    line-height:1.5;
    padding:0 0 0 2rem;
    margin-top:0;
    letter-spacing:0px;
}

ol {
    color:#474747;    
}

.intro {
    margin-top:3rem;    
}

.lede {
    font-size:1.5rem;
}

.project-list {
    margin-top:4rem;
}

.project-list-header {
    display:flex;
    align-items:center;
    color:#474747;
}

.project-list-header-small {
    color:#474747;
}

.project-list-header-dash {
    font-size:2rem;
    font-weight:300;
}

.project-list-header-dash-small {
    font-size:1.5rem;
    font-weight:300;
}

.project-link-large {
    margin-bottom:1rem;
    display: block;
    text-decoration: none;
    color:#FF0099;
}

.project-link-large::before {
    content: "——";
}

.project-link-small {
    font-size:1.5rem;
    margin-bottom:.5rem;
    display: block;
    text-decoration: none;
    color:#FF0099;
}

.project-link-small::before {
    content: "——";
}

.project-link-large:hover, .project-link-small:hover {
    color:#880052;
}
 
.project-link-small.active {
    color:rgb(129, 129, 129);
    cursor:default;
    pointer-events: none;
}

.project-title {
    font-weight:700;
}

.skills {
    display: flex;
    list-style: none;
    padding: 0;
    gap:1rem;
    margin-top:1.5rem;
    color:#474747;
}

.skill::before {
    content: "——";
    letter-spacing:0px;
}

.image {
    max-width:1200px;
    margin:3rem auto;
}

.image img {
    max-width: 100%;
    box-shadow:0px 1px 4px rgba(0,0,0,.10),0px 8px 16px rgba(0,0,0,.20);
}

.image.two-up {
    display:block;
}

.two-up-container {
    display:flex;
    justify-content: space-between;
}

.image.no-shadow img {
    box-shadow: none;
}

.image.two-up img {
    max-width:49%;    
}

figcaption {
    color:#6d6d6d;
    margin-top:1rem;
    font-style: italic;
}

/* .project-link-large:visited {
    color:#5f009e;
}

.project-link-large:visited:hover {
    color:#8a12da;
} */


.bump, .anti-bump {
    margin-top:1.5rem;
}


@media (max-width: 500px) {
   
    /* put navbar mobile behavior in here */
    /* set skills list to stack here */

    .skills {
        flex-direction:column;
        gap:.25rem;
    }

    .header {
        flex-direction:column;
        gap:.5rem;
    }

    .footer {
        flex-direction:column;
        gap:.5rem;
    }

    .two-up-container {
        flex-direction:column;
    }

    .two-up-container *:first-child {
        margin-bottom:.5rem;
    }

    .image.two-up img {
        max-width:100%;
    }
}