:root {
    --bg-color: #fff;
    --box-bg-color: #f2f2ff;
    --primary-text-color: #000;
    --primary-text-shadow-color: #fff;
    --post-text-color: #000;
    --max-content-width: calc(900px - env(safe-area-inset-left));
    --footer-color: #797979;
    --footer-background-color: #f2f2f2;
}

html, body {
    font-size: 100%;
    margin: 0;
    font: -apple-system-body !important;
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v15-latin-600.woff2') format('woff2');
}

body {
    background-color: var(--bg-color);
    color: var(--primary-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    touch-action: manipulation;
}

main {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

main .main-content {
    flex-direction: column;
    flex: 0 1 var(--max-content-width);
    margin: 0px;
    overflow-x: auto;
}

main .main-content h1.content-headline {
    margin-left: 16px;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: normal;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: text-shadow 0.3s ease;
    color: var(--footer-color);
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    margin-bottom: 32px;
}

footer .footer-content {
    flex: 0 1 var(--max-content-width);
    display: flex;
    justify-content: flex-end;
}

footer div.footer-content {
    padding: 0px 16px;
}

footer .footer-content .footer-links {
    flex: 0 1 auto;
    display: flex;
    gap: 8px;
    padding: 0px 16px;
}

footer .footer-content .footer-links a {
    color: var(--footer-color);
}

div.inner-content a {
    color: var(--post-text-color);
}

div.inner-content {
    margin: 16px 0px;
    padding: 16px;
    background-color: var(--box-bg-color);
    color: var(--post-text-color);
    overflow: auto;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

div.inner-content h1 {
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0px 0px 5px var(--primary-text-shadow-color);
    transition: text-shadow 0.3s ease;
 }

 div.inner-content h2 {
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: 0px 0px 5px var(--primary-text-shadow-color);
    transition: text-shadow 0.3s ease;
 }

 div.inner-content h3 {
    margin-bottom: 4px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 600;
 }

 div.inner-content h1.imprint-english-headline {
    margin-top: 16px;
 }