:root {
    /* https://coolors.co/aaabbc-8b8982-373f47-6c91c2-c3c9e9 */
    --col-bg-1: #efefef;
    --col-fg-1: #373f47;
    --col-fg-1-dark: #333333;
    --col-bg-2: #dddddd;
    --col-hl-1: #6c91c2;
    --col-hl-2: #c3c9e9;
    --col-hl-3: #aaabbc;
    --col-hl-4: #8b8982;
    --col-hl-5: #ce0058;
}
body {
    display: flex;
    flex-direction: column;
    background-color: var(--col-bg-1);
    color: var(--col-fg-1);
    margin: 0 auto;
    max-width: 50em;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    padding: 4em 1em;
}

a {
    color: var(--col-hl-1);
}

.highlight {
    color: var(--col-hl-5);
}

#header {
    display: flex;
    flex-direction: row;
}

#header #site-logo {
    width: 60px;
    height: 60px;
}
#header #baselink-container {
    align-content: center;
    font-size: 2em;
    font-weight: bold;
    padding-left: 15px;
}
#header #baselink-container a {
    text-decoration: none;
}

#footer {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--col-hl-4);
    gap: 10px;
}

h1 {
    color: var(--col-hl-1);
    margin-bottom: 0;
}

.timestamp {
    color: var(--col-hl-4);
}

h2 {
    margin-top: 1em;
    padding-top: 1em;
}

h1,
h2,
strong {
    color: var(--col-fg1-dark);
}

code,
pre {
    background: var(--col-bg-2);
    border-bottom: 1px solid var(--col-hl-3);
}

code {
    padding: 2px 4px;
    vertical-align: text-bottom;
}

pre {
    padding: 1em;
    border-left: 2px solid var(--col-hl-1);
}

/* BRIEFMARKENSAMMLUNG ==================================================== */

#briefmarkensammlung {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 30em;
    gap: 20px;
    margin: 0 auto;
}
#briefmarkensammlung .briefmarke {
    width: 8em;
}
#briefmarkensammlung .briefmarke img {
    width: 100%;
}

/* KALENDER =============================================================== */

#kalender {
    margin: 0 auto;
    max-width: 30em;
    aspect-ratio: 1;
    overflow-x: scroll;
}
#kalender .months-container {
    display: flex;
    flex-direction: row;
    width: min-content;
    height: 100%;
}
#kalender .spruch {
    text-align: center;
    font-size: 1em;
    font-style: italic;
}
#kalender .calender-month {
    position: relative;
    border: 2px solid var(--col-fg-1);
    display: flex;
    aspect-ratio: 1;
    flex-direction: column;
    justify-content: center;
}
#kalender .month {
    position: absolute;
    top: 1em;
    width: 100%;
    text-align: center;
    font-size: 1em;
}
#kalender .spruch {
    text-align: center;
    font-size: 2em;
    margin: 1em;
}
#kalender .source {
    text-align: right;
    padding-right: 3em;
    font-variant: small-caps;
}

#kalender .spruch span.darling {
    position: relative;
}