/* Custom style */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: "Oxanium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.hljs {
    color: var(--fg);
    background-color: hsl(263, 30%, 14%);
    border-radius: 0.25rem;
}

/* homepage */

#articles {
    margin-top: 8rem;
    text-align: left;
    list-style: none;
    background-color: var(--sidebar-bg);
    padding: 0;
    border-radius: 0.5rem;
}

#articles header {
    border-radius: 0.5rem;
    background-color: hsl(263, 30%, 14%); /* taken from .hljs */
    padding: 2rem 2rem 0 2rem;
}

#articles .article-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#articles header h3,
#articles header time,
#articles header i {
    margin: 0;
    line-height: 1.2;
}

#articles header time {
    white-space: nowrap;
    margin-left: auto;
}

#articles h2 {
    margin-block-start: 1rem;
}

#articles p {
    padding: 0 2rem 2rem 2rem;
}

/* Articles */
.list-no-style ul {
    list-style: none;
    padding-left: 1.25rem;
}

main > header {
    margin-top: 2.5rem;
    background-color: var(--sidebar-bg);
    padding: 2rem;
    border-radius: 0.25rem;
}

main > header > h1 {
    color: var(--links);
    text-decoration: underline;
}

main > header > div {
    display: flex;
    flex-direction: row;
}

main > header > div > time {
    margin-left: auto;
}