:root {
    --background-color: #ffffffff;
    --alternate-background-color: #f7f7f9ff;
    --text-color: #424242ff;
    --text-color-light: #777676bb;
    --text-color-heading: #181188ff;
    --link-color: #181188ff;
    --masthead-color: #ffffffff;
    --masthead-text: #424242ff;
    --shadow: #18118811;
    --shadow-light: #18118888;
}

html[data-theme='light'] {
    --background-color: #ffffffff;
    --alternate-background-color: #f7f7f9ff;
    --text-color: #424242ff;
    --text-color-light: #777676bb;
    --text-color-heading: #181188ff;
    --link-color: #181188ff;
    --masthead-color: #ffffffff;
    --masthead-text: #424242ff;
    --shadow: #18118811;
    --shadow-light: #18118888;
}

html[data-theme='dark'] {
    --background-color: #181188ff;
    --alternate-background-color: #f7f7f9ff;
    --text-color: #dededede;
    --text-color-light: #888888ff;
    --text-color-heading: #ffffffff;
    --link-color: #dededeff;
    --masthead-color: #ffffffff;
    --masthead-text: #424242ff;
    --shadow: #dedede11;
    --shadow-light: #dedede88;
}

html[data-theme='dark'] .contact li:before {
    filter: invert(0.88)
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

body {
    font-family: sans-serif;
    background: var(--background-color);
    color: var(--text-color);
}

h2, h3 {
    color: var(--text-color-heading);
    text-transform: uppercase;
}

h3 {
    margin-bottom: 1rem;
}

a {
    color: var(--link-color);
}

li {
    padding: 0.25rem 0;
}

.contact li:before {
    content: '';
    display: inline-block;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}

.contact li.email:before {
    background-image: url(email.svg);
}

.contact li.domain:before {
    background-image: url(globe.svg);
}

.contact li.location:before {
    background-image: url(location.svg);
}

aside .education li:not(:first-of-type) {
    margin-top: 1.5rem;
}

.summary {
    padding: 1rem 0;
    border-top: 1px solid var(--shadow);
    border-bottom: 1px solid var(--shadow);
    background-color: var(--masthead-color);
    color: var(--masthead-text);
}

.card:not(:first-of-type) {
    margin-top: 2rem;
}

.card span {
    font-size: small;
    color: var(--text-color-light);
}

.card li {
    margin-left: 1.8rem;
    list-style: disc;
}

img {
    max-width: 120px;
}

aside .skills div:not(:first-of-type) {
    margin-top: 1.5rem;
}

footer {
    border-top: 1px solid var(--shadow);
    text-align: center;
    line-height: 3rem;
}

.container {
    width: 100%;
    margin: 3rem auto;
    padding: 3rem 3rem 0 3rem;
    border: 1px solid var(--shadow);
    box-shadow: 0 1rem 3rem var(--shadow-light);
    display: grid;
    grid-gap: 1.5rem;
    grid-column-gap: 2rem;
    grid-template-areas: "header" "contact" "summary" "main" "aside" "footer";
}

.summary {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.main {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-rows: auto 1fr;
    grid-template-areas: "work" "projects";
}

.card {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "title" "tags" "description" "details";
    grid-row-gap: 0.88em;
}

.aside {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "education" "skills" "languages" "interests";
}

@media (min-width: 600px) {
    .card {
        grid-template-columns: 1fr auto;
        grid-template-areas: "title tags" "description description" "details details";
    }
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr auto;
        grid-template-areas: "header contact" "summary summary" "main aside" "footer footer";
        max-width: 720px;
    }

    .contact {
        padding: 0 1rem;
    }

    aside {
        border-left: 1px solid var(--shadow);
        padding: 0 1rem;
    }

    .card {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "tags" "description" "details";
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px
    }

    .card {
        grid-template-columns: 1fr auto;
        grid-template-areas: "title tags" "description description" "details details";
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

.header {
    grid-area: header;
}

.contact {
    grid-area: contact;
}

.summary {
    grid-area: summary;
}

.main {
    grid-area: main;
}

.work {
    grid-area: work;
}

.card h4 {
    grid-area: title;
}

.card span {
    grid-area: tags;
}

.card p {
    grid-area: description;
}

.card ul {
    grid-area: details;
}

.projects {
    grid-area: projects;
}

.aside {
    grid-area: aside;
}

.education {
    grid-area: education;
}

.skills {
    grid-area: skills;
}

.languages {
    grid-area: languages;
}

.interests {
    grid-area: interests;
}

.footer {
    grid-area: footer;
}