:root {
    --navbar-color: #accce4; /* mid blue */
    --font-color: black;
    --hover-color: darkred;
    --bg-color: #f6f6f6; /* background grey */  
}

body {
	font-family: Verdana, Arial, sans-serif; 
	font-size: 1rem;
	color: var(--font-color);
	line-height: normal;
}

pre {
    background-color: var(--bg-color);
    font-size: 0.875em;
    font-family: "Roboto Mono", monospace !important;
}

h1 {
    font-size: 180%; 
}

h2 {
    font-size: 150%; 
}

h3 {
    font-size: 110%; 
}

h4 {
    font-size: 100%; 
}

/* Navigation bars */
.navbar {
	font-family: Roboto, Arial, sans-serif;
    font-weight: bold;
  	background-color: var(--navbar-color) !important; 
    padding: 0.25rem 0 0 0;
}

.navbar:hover, .navbar a:hover {
    color: var(--hover-color);
}

.nav-item .nav-link {
	font-weight: bold;
	color: var(--font-color) !important;
	background-color: transparent !important; 
}

.nav-item:hover, .nav-link:hover {
    color: var(--hover-color) !important;
}

.nav-text.text-muted.me-auto {
  color: var(--font-color) !important;
}

.home-icon, .home-icon a {
	color: var(--font-color);
	padding: 0 0.5rem 0 0;
}

.home-icon:hover {
    color: var(--hover-color);
}

.form-control {
	height: 1.8rem;
}

@media only screen and (max-width: 600px) {
    td {
	    display: block;
    }
}