body {
    font-family: helvetica, sans-serif;
}

footer {
    font-size: smaller;
}

h1 {
    font-size: xx-large;
    margin-block-start: 0rem;
    margin-block-end: 2rem;
}

h2 {
    font-size: x-large;
    margin-block-start: 2.5rem;
    margin-block-end: 1rem;
}

h3 {
    font-size: large;
    margin-block-start: 1.5rem;
    margin-block-end: 1rem;
}

p {
    margin-block-start: 0.7rem;
    margin-block-end: 0.7rem;
}

ul, ol {
    margin-block-start: 0rem;
    margin-block-end: 0rem;
}

ul {
    padding: 0 0 0 1rem;
}

ol {
    padding: 0 0 0 1.2rem;
}

li {
    margin-block-end: 0.5rem;
}

ol ul li {
    list-style-type: disc;
}

img {
    max-width: 100%;
}

pre {
    white-space: pre-wrap;
}

:root {
    --light-bg: white;
    --light-fg: #222;
    --light-bg-2: lavender;
    --light-separator: lightgray;
    --light-muted: gray;

    --dark-bg: black;
    --dark-fg: #eee;
    --dark-bg-2: #444;
    --dark-separator: gray;
    --dark-muted: lightgray;
    --dark-link: #4af;
    --dark-link-visited: #88d;

    --bg: var(--light-bg);
    --fg: var(--light-fg);
    --bg-2: var(--light-bg-2);
    --separator: var(--light-separator);
    --muted: var(--light-muted);
}

@media (prefers-color-scheme: dark) {
    :root {
	--bg: var(--dark-bg);
	--fg: var(--dark-fg);
	--bg-2: var(--dark-bg-2);
	--separator: var(--dark-separator);
	--muted: var(--dark-muted);
    }
    
    a:link {
    	color: var(--dark-link);
    }

    a:visited {
    	color: var(--dark-link-visited);
    }
}