:root {
	--dark-green: #2B492B;
	--medium-green: #508E50;
	--light-green: #93A893;
	--medium-red: #992e27;
	--border-color: #000;
	--highlight-color: #FFAB6E;
	--blue-highlight-color: #00D7FB;
	--nav-color: #77C3B5;

	--padding-size: 16pt;
}

html {
	height: 100%;
	font-size: 16pt;
	color: #222;
}

body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: var(--dark-green);
}

#main {
	position: absolute;
	left: 100px;
	right: 100px;
	top: 250px;

	border: 2px solid #000;
	border-bottom: 0;
	border-top: 0;

	width: calc(100% - 200px - 4px);
	min-height: calc(100% - 250px - 2px);

	background-color: #FFF;
	display: block;
}

p {
	margin: 0;
	padding-left: var(--padding-size);
	padding-right: var(--padding-size);
    padding-top: calc(var(--padding-size) / 2);
    padding-bottom: calc(var(--padding-size) / 2);
	text-align: justify;
	font-size: 16pt;
	line-height: 1.4;
}

ol, ul {
	margin: 0;
	padding-left: calc(3 * var(--padding-size));
	padding-right: var(--padding-size);
}

li {
    line-height: 1.5;
}

@media (max-width: 700px) {
	#main {
		left: 0px;
		right: 0px;
		width: 100%;
		border: 0;
	}

    /* Justified text can behave strangely on small screens */
    p {
        text-align: left;
    }
}

tt {
	font-size: 15pt; /* Slightly smaller than normal text */
	background-color: #DDD !important;
	border-radius: 5px;
	font-style: normal;
}

h1 {
	margin: 0;
	padding: 0.5em;
	background-color: var(--medium-green);
	border-top: 2px solid #000;

	text-align: center;
	font-size: 28pt;
	font-weight: bold;
}


h2 {
	padding: 0.5em;
	margin: 0;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;

	background-color: var(--light-green);

	text-align: center;
	font-size: 18pt;
	font-weight: normal;
}

h3 {
	margin: 0;
	padding-left: var(--padding-size);
	padding-right: var(--padding-size);
}

li {
    text-align: left;
}

/* Code blocks should scroll horizontally rather than running off */
pre {
	margin: 0;
	padding: 0.5em;
	width: calc(100% - 1em);
	overflow-x: auto;
	font-size: 15pt; /* Slightly smaller than normal text */
	background-color: #333;
	color: var(--light-green);
}

tt {
	font-size: 15pt; /* Slightly smaller than normal text */
}

#all-articles {
	background-color: var(--highlight-color);
	text-align: center;
	padding: var(--padding-size);
	font-size: 18pt;
	font-weight: bold;
}

.footnotes {
    padding-top: var(--padding-size);
    padding-bottom: var(--padding-size);

    border-top: calc(var(--padding-size) / 2) double var(--light-green);
}
.footnotes::before {
    content: "Footnotes";
    font-size: 18pt;
    font-weight: bold;
	padding-left: var(--padding-size);
}
.footnotes li::marker {
    content: "[" counter(list-item) "]";
}
.footnotes li {
    /* Slightly smaller and lighter than normal text */
    font-size: 14pt;
    opacity: 0.8;
}
.footnotes li p {
    padding: calc(var(--padding-size) / 2);
}
.footnotes :target p {
    text-decoration: underline var(--highlight-color);
    text-decoration-thickness: 3px;
}


.hills {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
}

#hills-background {
	background: var(--blue-highlight-color);
	background: linear-gradient(to bottom, var(--blue-highlight-color) , #FFF);
}

/* Images should be full width, even when wrapped in a p */
img {
	width: 100%;
}
p:has(img) {
  padding: 0;
}

/* Email Stuff */
.email {
	font-weight:bold;
}
.email .at:after {content: "@";}