:root {
   --bg-color: #f5f5f5;
   --text-color: #19171c;
   --accent-color: #e44d2e;
   --accent-text-color: #ffffff;

   --max-width: 640px;
}



@media (prefers-color-scheme: dark) {

    :root {

        --bg-color: #191919;
        --text-color: #cbcbcb;
        --accent-color: #756b83;
        --accent-text-color: #ffffff;

    }

}

body 
{

   background-color: var(--bg-color);
   color: var(--text-color);

   font-family: "Noto Sans", sans-serif;
   font-size: 16px;
   line-height: 24px;

}

::selection
{
    background-color: var(--accent-color);
    color: var(--accent-text-color);
}

header
{

    background-color: var(--bg-color);

    padding: 1.5rem;

    max-width: var(--max-width);

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

}

.header-left {
    display: flex;
    gap: 0.75rem;
}

.header-logo a {
    text-decoration: none;
    font-size: 6rem;
    color: var(--text-color);
}

.header-logo a:hover {
    color: var(--accent-color);
}

@media (max-width: 550px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

header h1
{
    margin: 0;
}

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

header h1 > a:hover
{
    text-decoration: underline;
    color: var(--accent-color);
}

header p
{
    margin: 0;
}

main
{

    padding: 1.5rem;
    background-color: var(--bg-color);
    max-width: var(--max-width);

}

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

h2 a:hover
{
    text-decoration: underline;
    color: var(--accent-color);
}

.archive-list
{
    list-style-type: none;
}

footer 
{

    padding: 1.5rem;
    background-color: var(--bg-color);
    max-width: var(--max-width);

}

h1
{

    font-size: 1rem;
    line-height: 24px;

}

h2 
{

    font-size: 1.5rem;

}

a 
{
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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