body {
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

a {
    color: #000;
}

#link {
    text-decoration: none;
    color: chartreuse;
    transition: 0.3s;
}

#link:hover {
    color: #61bdff;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none
}

div.wrapper {
    padding: 4em 17em
}

img.logo {
    height: 85px
}

div.header {
    display: flex;
    justify-content: space-between
}

div.header div.social {
    display: flex;
    height: 42.5px;
    align-items: center
}

div.social a,
div.social img.social-icon {
    height: 25px
}

div.social a:not(:last-child) {
    margin-right: .8em
}

div.social img.social-icon {
    margin: auto;
    opacity: .5;
    transition: .15s ease-in-out
}

div.social img.social-icon:hover {
    opacity: 1
}

h1.name {
    margin: auto 30px;
    font-size: 50px
}

div.content {
    margin-top: 2em
}

h2.about {
    font-size: 35pt;
    margin: 0
}

img.me {
    width: 100%
}

span.footnote {
    margin: 5px
}

div.img img {
    margin-bottom: 10px
}

div.img span.footnote {
    color: #565656;
    font-size: 10pt
}

div.hero.img {
    margin-top: 2em;
    margin-bottom: 1.5em
}

div.cards {
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-basis: 0
}

div.cards div.card {
    padding: 1.5em;
    margin-bottom: 1em;
    height: fit-content;
    background-color: #f2f2f2
}

div.card p.splitter {
    border-top: 4px #bbb solid;
    margin-top: calc(1em + 4px)
}

div.languages span.language {
    display: inline-block;
    margin-right: 16px;
    font-weight: 700;
    font-size: 15pt;
    margin-bottom: .5em
}

span.language img.icon {
    height: 16px;
    margin-right: 5px
}

div.card h1.title {
    margin: 0;
    margin-bottom: .5em
}

div.card img.banner {
    width: 100%
}

div.card p:last-child {
    margin-bottom: .5em
}

ul {
    margin-bottom: 0;
    margin-top: 1em;
    padding-left: 2em;
    list-style: none;
    margin-left: 0;
    padding-left: 2em
}

li {
    font-size: 15pt;
    margin-bottom: .5em
}

ul>li:before {
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    content: "-"
}

div.projects {
    display: grid;
    grid-template-columns: auto auto
}

div.projects div.project {
    height: fit-content;
    background-color: #e2e2e2
}

div.projects div.project:not(:nth-last-child(-n+2)) {
    margin-bottom: 1em
}

div.projects div.project.clickable {
    cursor: pointer;
    transition: all .1s cubic-bezier(.22, .61, .36, 1)
}

div.project.clickable a {
    text-decoration: none
}

div.projects div.project.clickable:hover {
    transform: scale(1.05)
}

div.project img.banner {
    width: 100%
}

div.project div.info {
    padding: 1.5em;
    margin-top: -3px
}

div.items.assorted {
    display: grid;
    grid-template-columns: auto auto auto
}

div.items.assorted p.item-label {
    font-weight: 600
}

div.items div.item {
    display: flex
}

div.item p.item-label {
    margin: 0;
    font-size: 1.2em;
    font-weight: 500
}

div.item a {
    text-decoration: none
}

div.item img.item-icon {
    height: 20px;
    margin-top: .15em;
    margin-right: .65em
}

div.items:not(.assorted) div.item:not(:last-child) {
    margin-bottom: .85em
}

div.info h2.name,
div.info p.position {
    margin: 0
}

div.info p.position {
    margin-top: .25em;
    color: #333;
    font-style: italic
}

div.form {
    display: flex;
    flex-direction: column
}

div.form * {
    padding: .5em;
    margin: 0;
    border: none;
    resize: none;
    outline: 0;
    font-size: 15pt;
    background-color: #e2e2e2
}

div.form :not(:last-child) {
    margin-bottom: .4em
}

::selection {
    background: #ffeb3b
}

.is-light {
    display: block
}

.is-dark {
    display: none
}

@media (prefers-color-scheme:dark) {
    body {
        color: #fff;
        background-color: #000
    }

    .is-light {
        display: none
    }

    .is-dark {
        display: block
    }

    a {
        color: #fff
    }

    div.social img.social-icon,
    img.logo,
    span.language img.icon.invertable,
    span.logo::after {
        filter: invert(1)
    }

    div.img span.footnote {
        color: #b3b3b3
    }

    div.cards div.card {
        background-color: #0c0c0c;
        border-right-color: #000;
        border-bottom-color: #000
    }

    div.card p.splitter {
        border-top-color: #252525
    }

    div.projects div.project {
        background-color: #000
    }

    div.project p.position {
        color: #929292;
        font-weight: 300;
        font-style: normal
    }

    div.project img.banner.invertable {
        filter: invert(1)
    }

    div.project img.banner.invertable,
    div.project img.banner.is-dark {
        border-bottom: #00000026 1px solid
    }

    div.form * {
        color: #fff;
        background-color: #000
    }

    ::selection {
        background: #1ba0ff
    }
}

@media only screen and (min-width:1100px) {
    div.projects div.project:nth-child(2n) {
        margin-left: 1em
    }
}

@media only screen and (max-width:1440px) {
    div.wrapper {
        padding: 4em 11em
    }
}

@media only screen and (max-width:1280px) {
    div.wrapper {
        padding: 4em 8em
    }
}

@media only screen and (min-width:1100px) {
    div.items.assorted div.item:not(:nth-last-child(-n+3)) {
        margin-bottom: .85em
    }
}

@media only screen and (max-width:1100px) {
    div.projects {
        grid-template-columns: auto
    }

    div.items.assorted {
        grid-template-columns: auto auto
    }

    div.items.assorted div.item:not(:nth-last-child(-n+2)) {
        margin-bottom: .85em
    }

    div.projects div.project:not(:last-child) {
        margin-bottom: 1em
    }

    div.wrapper {
        padding: 4em 3em
    }
}

@media only screen and (min-width:900px) {
    div.content p.in-depth {
        font-size: 20px
    }

    div.cards div.card:nth-child(2n) {
        border-right-width: 0
    }

    div.card-columns {
        display: flex;
        margin-top: 2em
    }

    div.cards {
        margin-right: 1em
    }

    div.card p {
        font-size: 13pt
    }
}

@media only screen and (max-width:900px) {
    img.logo {
        height: 55px
    }

    div.content {
        margin-top: 1.25em
    }

    h2.about {
        font-size: 25pt
    }

    div.img {
        margin-top: 1.5em;
        margin-bottom: 1.5em
    }

    div.wrapper {
        padding: 3em 2em
    }

    div.content p.in-depth {
        font-size: 13pt
    }

    div.cards {
        margin-top: 1.25em
    }

    div.cards div.card {
        flex: 1 1 45%
    }
}