html {
    height: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #111;
}

body {
    font-family: ui-sans-serif, -apple-system, "Helvetica Neue", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1.35em;
    line-height: 1.65em;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
    text-align: center;
}

a,
a:visited,
a:active {
    text-decoration: none;
    color: #990de2;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

a:hover {
    border-bottom: 2px solid #990de2;
}

header {
    margin-top: 30px;
}

header a {
    border: none;
}

article {
    text-align: left;
}

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

section {
    margin-top: 75px;
}

.post section {
    margin-top: 1em;
}

.post h6 {
    margin: 0;
    padding: 0;
}

footer {
    padding: 1em;

    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    display: block;
    margin: 5px auto;
    max-width: 100%;
    border-radius: 5px;
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

table th,
table td {
    padding: 5px;
}

table tbody tr:hover {
    background-color: rgba(5, 5, 5, 0.2);
}

table:not(.contact-table) tbody tr:not(:last-child) {
    border-bottom: 1px solid lightgray;
}

code {
    font-family: "Hack", "Fira Code", Courier, monospace;
}

pre code {
    display: block;
    box-sizing: border-box;
    overflow: auto;

    font-size: 0.8em;
    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 5px;
    padding: 5px;
}

figure {
    display: table;
    margin: 2em auto;
}

figure img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    word-wrap: break-word;
    margin-top: -10px;
    padding: 5px 5px 0 5px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0 0 5px 5px;
    text-align: center;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 2em;
}

.container.post {
    max-width: 800px;
}

.container.art {
    max-width: 95%;
}

.project {
    display: inline-block;
    break-inside: avoid-column;
}

.project-name {
    font-size: 1.2em;
}

.posts ul {
    width: 100%;
    margin: 0 auto;

    text-align: left;

    list-style: none;
    padding: 0;
}

.mt-1 {
    margin-top: 0.5em;
}

.published-at {
    color: darkgray;
    font-family: ui-monospace, "Courier New", monospace;
}

.contact {
    margin: 0 auto;
}

.contact h3 {
    padding-top: 1em;
}

.contact table {
    width: 100%;
}

.contact td:first-of-type {
    text-align: left;
}

.contact td:last-of-type {
    text-align: right;
}

.others div:not(:last-of-type) {
    margin-bottom: 20px;
}

.services {
    text-align: left;
}

.handles {
    text-align: right;
}

.reference {
    max-width: 800px;
    margin: 0 auto;
}

.reference p,
.reference ul {
    text-align: left;
}

.artwork {
    margin-bottom: 3rem;
}

.artwork a {
    border: 0;
    padding: 0;
}

.nsfw {
    display: none !important;
}

.color {
    border-radius: 5px;
    padding: 3px;
}

.color-dark-violet {
    color: white;
    background-color: #930de1;
}

.color-magenta {
    color: white;
    background-color: #fb17e6;
}

.color-blue {
    color: black;
    background-color: #02cfff;
}

.color-sky-blue {
    color: black;
    background-color: #00dbff;
}

.color-dark-blue {
    color: white;
    background-color: #1b69f7;
}

.color-blueberry {
    color: white;
    background-color: #604db6;
}

.color-gold {
    color: black;
    background-color: #d7a849;
}

#icons {
    max-width: 1200px;
    margin: 0 auto;
}

.artwork-grid picture {
    display: block;
    margin: 0 auto;
}

.artwork-grid .grid-item {
    display: inline-block;
}

.artwork-grid.grid-400 {
    column-width: 400px;
}

.artwork-grid.grid-400 .grid-item {
    margin-bottom: 3em;
}

.artwork-grid.grid-150 {
    column-width: 150px;
}

.artwork-grid.grid-150 .grid-item {
    margin-bottom: 1em;
}

.post-info h3,
.post-info h6 {
    display: inline-block;
}

section.char-desc li:not(:first-child) {
    padding-top: 8px;
}

.mobile-hidden {
    display: initial;
}

.text-center {
    text-align: center;
}

.limit-width {
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}

.column-container {
    columns: 2;
}

.artist-links {
    list-style: none;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
}

.artist-links:last-child {
    margin-bottom: -0.5rem;
}

.artist-links li {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
    padding: 0.25rem;
}

.artist-links li a {
    border-bottom-color: #777;
}

.artist-links li a:hover {
    border-bottom-color: #02cfff;
}

@media (min-width: 451px) {
    .reference ul {
        padding: 0;
        margin: 0;
    }

    .post-info h6 {
        margin-left: 1em;
    }

    h6.published-at {
        margin-top: -2em;
        text-align: center;
    }

    section.posts time {
        display: block;
        float: right;
    }

    section.posts li {
        clear: both;
    }
}

@media(max-width: 800px) {
    .column-container {
        columns: 1;
    }
}

@media (max-width: 450px) {
    .container {
        margin-bottom: 5vh;
    }

    .contact .items {
        flex-grow: 0;
    }

    .contact tr:not(:last-of-type) {
        display: block;
        margin-bottom: 1em;
    }

    .contact td,
    .contact td:first-of-type,
    .contact td:last-of-type {
        display: block;
        text-align: center;
    }

    .reference {
        width: 100%;
        padding: 0 2vw;
    }

    .color {
        padding: 1px 3px;
    }

    .mobile-hidden {
        display: none;
    }

    .post-info h3 {
        margin: 0;
        padding: 0;
    }

    .post-info .published-at {
        display: block;
    }
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background-color: #111;
        color: #eee;
    }

    a,
    a:visited,
    a:active {
        color: #02cfff;
    }

    a:hover {
        border-bottom-color: #02cfff;
    }
}