:root {
    color-scheme: light dark;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: text-top;
    background: transparent;
}

body {
    font-family: 'Avenir Next', Avenir, sans-serif;
    text-align: center;
    overflow: scroll;
    background-size: 100%;
    background: light-dark(#fff, #222);
}

#jobs-parent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1em;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.job-info {
    max-width: 40em;
    text-align: left;
    margin-top: 1em;
}

.job-info h1 {
    text-align: center;
    font-size: large;
}

.job-info h2 {
    text-align: center;
    font-size: medium;
}

.job-info h3 {
    text-align: center;
    font-size: small;
    font-style: normal;
}

.job-info ul {
    align-self: flex-end;
    list-style-position: outside;
    text-align: left;
    padding: 0 1em;
}

.job-info .job-info-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.job-description {
    position: relative;
    z-index: -1;
}

.job-image {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.job-image img {
    max-width: 100%;
    max-height: 20em;
    border-radius: .3em;
}

section#intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: .5em;
    text-align: left;
}

#intro ul {
    width: 80%;
    max-width: 40em;
    position: relative;
    left: 1em;
}

#intro p {
    width: 80%;
    max-width: 40em;
}

#resume-download-link {
    text-align: center;
    font-size: x-large;
}

#skills ul {
    width: 100%;
    max-width: 40em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 0 2em;
}

section#skills {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 1em 0 0 0;
}