:root {
    --solid-color: #9A2513;
    --bg-color: #f5f5f5;
    --txt-color: #333;
    --nav-bg-color: #9A2513;
    --nav-txt-color: #eee;
    --foot-bg-color: #ddd;
    --main-max-width: 1200px;
    --main-padding: 10px;
    --article-background-color: #fbfbfb;
    --bar-max-width: 450px;
    --invalid-input-color: red;
}

ul {
	list-style-type: square;
}

a:link {
    color: var(--solid-color);
    text-decoration: underline;
}
a:hover {
    color: #f13a1e;
}
a:active {
    color: red;
}
a:visited {
    color: #cf553a;
}

@media (prefers-color-scheme: dark) {
    :root {
	--bg-color: #333;
	--txt-color: #eee;
	--foot-bg-color: #555;
	--invalid-input-color: orange;
	--article-background-color: #2e2e2e;
    }
    a:link {
	color: var(--txt-color);
	text-decoration: underline;
    }
    a:hover {
	color: white;
    }
    a:active {
	color: #bbb;
    }
    a:visited {
	color: #999;
    }
}

html {
    scroll-padding-top: 100px;
}

html,body,header,footer {
    color: var(--txt-color);
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    font-family: 'Cantarell','Calibri','Helvetica','Open Sans','Verdana';
    font-size: 1em;
    font-weight: normal;
}

main {
    padding: var(--main-padding);
    max-width: var(--main-max-width);
    margin: 0 auto;
}

h1,h2 {
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
}

h1 {
    font-size: 2.2em;
    margin: 0.8em 0 1.2em;
}

h2 {
    font-size: 1.5em;
    margin: 0.1em 0 0.5em;
}

.hidden {
	display: none;
}

footer {
    --footer-padding: 20px;
    padding: var(--footer-padding) 0 0;
    text-align: center;
    background-color: var(--foot-bg-color);
}

footer p {
    display: block;
    margin: 0 auto;
    padding: 0 0 var(--footer-padding);
    max-width: var(--bar-max-width);
}

@media (min-width: 600px) {
    :root {
	--main-padding: 20px;
    }
}

@media (min-width: 800px) {
    :root {
	--main-padding: 30px;
    }
}

@media print {
    nav.main_bar {
	display: none;
    }
    form {
	display: none;
    }
    h1 {
	display: none;
    }
}