* {
    box-sizing: content-box;
}

:root {
    --link-color: hsl(210, 95%, 39%);
    --link-color-light: hsl(210, 95%, 49%);
    --text-color-secondary: hsl(0, 0%, 40%);
    --page-background-color: hsl(0, 0%, 90%);
    --content-background-color: rgba(255, 255, 255, 90%);
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--page-background-color);
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", "Noto Sans TC", "sans-serif";
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
    color: var(--link-color-light);
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

.main-container {
    max-width: calc(900px + 4em);
    margin: 0 auto;
    padding: 2em;
}

#profile, #content > section, #footer {
    padding: 2em;
}

#content > section {
    margin-top: 1em;
}

#profile, #content > section {
    background-color: var(--content-background-color);
}

section > h1::before {
    display: inline;
    content: "# ";
}

ul li::marker {
    content: "-  ";
}

ul li {
    margin-top: .5em;
}

ul.item-list, ul.block-list {
    padding-left: 0;
}

ul.item-list > li::marker,
ul.block-list > li::marker {
    content: none;
}

ul.item-list .header {
    display: grid;
    grid-template-columns: 1fr max-content;
}

ul.item-list .header .title {
    margin: 0;
}

ul.item-list .header .subject {
    grid-column: 1;

    color: var(--text-color-secondary);
}

ul.item-list .header .meta {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;

    color: var(--text-color-secondary);
}

ul.block-list > li:not(:first-child) {
    margin-top: 1em;
}

ul.block-list > li > h2 {
    margin-bottom: 0;
}

ul.meta-list > li > .meta {
    font-weight: bold;
}

ul.meta-list > li > .meta::before {
    content: "\b7";
    display: inline-block;
    padding: 0 .5em;
}

ul.project-list span.project {
    font-size: 1.15em;
    font-weight: bold;
}

ul.project-list span.project::after {
    display: inline-block;
    content: " | ";
    padding: .25em;

    font-size: 1rem;
    font-weight: normal;
}

#profile {
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: .5em;
}

#profile h1,
#profile .info-container > h2 {
    margin: 0;
}

#profile h1,
#profile .description {
    grid-column: 1
}

#profile .link-container {
    grid-row: 1 / span 2;
    grid-column: 2;

    align-self: center;
}

#profile .info-container p {
    margin-top: .5em;
    margin-bottom: 0;
}

footer {
    text-align: center;
    padding: 2em 0;
}

@media screen and (max-width: 768px) {
    .main-container {
        max-width: calc(900px + 3em);
        padding: 1.5em;
    }

    #profile, #content > section, #footer {
        padding: 1.5em;
    }

    #profile {
        grid-template-columns: 1fr;
    }

    #profile .link-container {
        grid-row: unset;
        grid-column: 1;
    }

    #profile .info-container {
        margin-top: 1em;
    }
}

@media screen and (max-width: 512px) {
    ul.item-list .header {
        grid-template-columns: 1fr;
    }

    ul.item-list .header .meta {
        grid-area: unset;
    }

    ul.meta-list,
    ul.project-list {
        padding-left: 1em;
    }

    ul.meta-list > li > .meta {
        display: block;
    }

    ul.meta-list > li > .meta::before {
        content: "";
        padding: 0;
    }
}