body {
    font-family: 'Roboto Mono', monospace;
    margin: 0;
    padding: 10;
    background-color: #333;
    color: #fff; /* Light font color */
}

header {
    background-color: #222; /* Darker header background */
    color: #fff;
    text-align: left;
    padding: 5px 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #fff; /* Light link color */
}

section {
    padding: 20px;
    margin: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #222;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  font-family: 'Roboto Mono', monospace;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ccc;
  color: black;
}


/* TODO: add a color to the active/current link -- Irish green; this attempt isn't working

.topnav a.active {
  background-color: #04AA6D;
  color: #222;
}
.topnav li.selected {
  background-color: #04AA6D;
  color: #222;
}
*/

/* unvisited link */
.pagetext a:link {
  color: #04AA6D;
}

/* active link */
.pagetext a:active {
  color: #ff7733;
}

/* visited link */
.pagetext a:visited {
  color: #00ffff;
}

/* mouse over link */
.pagetext a:hover {
  color: hotpink;
}