body {
	font-family:-apple-system,Helvetica,sans-serif;
	font-size:12pt;
	/* Assign these colors to variables so they can easily be used in other places, including other .css files: */
	--my-text-color:black;
	--my-bg-color:white;
	--my-link-color:#9F5000;
	--my-link-color-active:#5ECB43;
	--my-link-color-hover:#5ECB43;
	--my-link-color-visited:#9F5000;
	color:var(--my-text-color);
	background-color:var(--my-bg-color);
}

body#dark {
	/* Assign these colors to variables so they can easily be used in other places, including other .css files: */
	--my-text-color:white;
	--my-bg-color:#222;
	--my-link-color:#EF8700;
	--my-link-color-active:#5ECB43;
	--my-link-color-hover:#5ECB43;
	--my-link-color-visited:#EF8700;
	color:var(--my-text-color);
	background-color:var(--my-bg-color);
}

/* This is how w3schools suggests how to make it so a thing 2 that comes after a thing 1 will be forced to move down below the wrapping rect of thing 1. */
.clearfix::after {
	clear:both;
	display:table;
	content:"";
}

ul.topmenu {
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:#bbb;
	position:fixed;
	top:0;
	left:0;
	width:100%;
}

ul.topmenu#dark {
	background-color:#555;
}

ul.topmenu li {
	float:left;
}

ul.topmenu li a {
	display:block;
	color:#9F5000;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}

ul.topmenu#dark li a {
	color:orange;#CA6600
}

ul.topmenu li a.currentpage {
	background-color:#eee;
}

ul.topmenu#dark li a.currentpage {
	background-color:black;
}

ul.topmenu li a:hover:not(.currentpage) {
  background-color:yellow;
}

header {
/* 	font-size:22pt; */
	margin-top: 80px;
	margin-bottom:60px;
}

h1 {
 	font-size:36pt;
	text-shadow:0 .1em 10px gray;
}

div.basic {
	max-width:700px;
	min-width:0px;
	margin:40px auto; /* 40px top and bottom, auto left and right, which means that since we specify the width, the left & right is calculated so the div is centered in the window. */
	display:block;
	line-height:1.3;
}

/* Should these be moved to images? */
div.moam {
	content:url(images/mwmac.png);
	display:block;
	margin-left:auto;
	margin-right:auto;
}

div.moam#dark {
	content:url(images/mwmac_white.png);
}

.slanty {
	font-style:italic;
}

.text-center {
	text-align:center;
}

a:link {
	color:var(--my-link-color);
}

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

a:hover {
	color:var(--my-link-color-hover);
}

a:active {
	color:var(--my-link-color-active);
}