html {
    height: 100%;
    background-color: black;
    color: #f6f6f6;
    font-family: sans-serif;
    font-size: 12pt;
}
body {
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 20pt;
    margin: 2rem 0 1rem 0;
}
h2 {
    font-size: 16pt;
    margin: 2rem 0 1rem 0;
}
h3 {
    font-size: 12pt;
    margin: 1rem 0;
}
ol,
ul {
    margin: 1rem 0;
    padding: 0 0 0 2rem;
}
li {
    margin: 0.25rem 0;
}
small {
    color: #aaa;
    font-size: 10pt;
}
p {
    margin: 1rem 0;
}
a {
    color: #f6f6f6;
}
:focus {
    outline: #ccc auto 1px;
}

#icons {
    display: none;
}

#index {
    display: grid;
    grid-template-columns: auto max-content auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "spacer bio lists"
        "spacer profile lists";
    height: 100vh;
    column-gap: 2rem;
    overflow: hidden;
}
#index #bio > ol,
#index #profile > ol,
#index #lists > ol {
    list-style: none;
    padding-left: 0;
}
#index #bio > ol > li,
#index #profile > ol > li,
#index #lists > ol > li {
    margin: 0;
}
#index #bio,
#index #profile {
    width: max-content;
    justify-self: center;
    overflow: hidden;
}
#index #bio {
    grid-area: bio;
    align-self: end;
}
#index #stats > li {
    display: flex;
    align-items: center;
}
#index #stats > li + li {
    margin-top: 0.5rem;
}
#index #stats .icon {
    fill: #aaa;
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
}
#index #profile {
    grid-area: profile;
    align-self: start;
}
#index #profile > img {
    display: block;
    width: 180px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
}
#index #socials {
    display: flex;
    justify-content: center;
}
#index #socials > li + li {
    margin-left: 0.5rem;
}
#index main {
    grid-area: lists;
    display: flex;
    align-self: center;
    flex-wrap: wrap;
    max-height: 100vh;
    overflow: auto;
    padding-right: 2rem;
}
#index main::before {
    content: "";
    flex: 1 1 auto;
    max-width: 4rem;
}
#index #lists {
    flex: 2 1 auto;
}
#index #lists > ol > li + li {
    margin-top: 1rem;
}
#index #lists > ol:last-child > li:last-child {
    margin-bottom: 2rem;
}
@media (max-width: 899px) {
    #index #lists .project .stores .links span {
        display: none;
    }
}
@media (max-width: 849px) {
    #index {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "bio"
            "lists"
            "profile";
        height: auto;
        padding: 0 1.5rem;
    }
    #index #bio {
        justify-self: start;
        padding-left: 0;
    }
    #index #bio ol {
        margin-bottom: 0;
    }
    #index main {
        max-height: none;
        padding-right: 0;
    }
    #index main::before {
        display: none;
    }
    #index #lists > ol:last-child > li:last-child {
        margin-bottom: 0;
    }
    #index #profile {
        padding-left: 0;
    }
    #index #profile > img {
        margin-top: 2rem;
    }
    #index #profile > ol {
        margin-bottom: 2rem;
    }
}

.article .meta,
.post .meta {
    display: block;
    margin-top: 0.25rem;
}
.article .meta small:not(:last-of-type)::after,
.post .meta small:not(:last-of-type)::after {
    content: " •";
}

.project {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "logo name"
        "logo description"
        "stores stores"
        "source source";
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}
.project .logo {
    grid-area: logo;
    height: 32px;
    filter: grayscale(0.5);
}
.project .name {
    grid-area: name;
    align-self: end;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.project .description {
    grid-area: description;
    align-self: start;
}
.project .stores {
    grid-area: stores;
    display: flex;
    align-items: center;
}
.project .stores .stars {
    --star-active: #fed94b;
    --star-inactive: #999;
    filter: grayscale(0.5);
    cursor: default;
}
.project .stores .links,
.project .stores .links a {
    display: inline-flex;
    align-items: center;
}
.project .stores .links a + a {
    margin-left: 0.5rem;
}
.project .stores .links span {
    margin-left: 0.25rem;
}
.project .stores .stars + .reviews::before,
.project .stores * + .links::before {
    content: "";
    margin: 0 0.3rem;
}
.project .source {
    grid-area: source;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.project .stores,
.project .source {
    font-size: 10pt;
    color: #aaa;
}
.project .stores a,
.project .source a {
    color: #aaa;
}
.project .stores .stars .star,
.project .stores .links img {
    width: 16px;
    height: 16px;
}
@media (max-width: 619px) {
    .project .stores .links span {
        display: none;
    }
}
@media (max-width: 599px) {
    .project {
        grid-template-rows: min-content auto auto auto;
        grid-template-areas:
            "logo name"
            "description description"
            "stores stores"
            "source source";
        column-gap: 0.4rem;
    }
    .project .logo {
        height: 24px;
    }
    .project .name {
        align-self: center;
    }
}
@media (max-width: 359px) {
    .project .stores .reviews .text {
        display: none;
    }
}

.social {
    text-decoration: none;
}
.social img {
    height: 20px;
}