:root {
	--main-bg-color: #3080D0;
	--main-fg-color: #F8A020;
	--hover-fg-color: #FFD050;
    --light-fg-color: #EEEEEE;
}

body {
	color: #222;
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	color: #333;
}

#page-wrapper {
    background: #F0F8FF;
}

#header {
	background: var(--main-bg-color);
}

#header a {
	color: var(--light-fg-color);
	font-size: 130%;
}

#header a.active {
	color: var(--main-fg-color) !important;
}

#header a:visited {
	 color: var(--light-fg-color);
}

#header a:hover, #footer a:hover {
     color: var(--hover-fg-color) !important;
}

.mobile-menu .button_container span {
	background: var(--main-fg-color);
}

#header .logo svg, #header .logo img {
    height: 64px;
}

#footer {
	background: var(--main-bg-color);
	color: var(--light-fg-color);
	padding: 1rem;
	text-align: left;
}

#footer-container {
    display: grid;
    grid-template-columns: 1fr auto;
}

#footer a, #footer a:visited {
    color: var(--main-fg-color);
    padding: 0 2em 0 0;
    font-size: 110%;
}

#overlay {
background: var(--main-bg-color);
}

#overlay a {
	color: var(--light-fg-color) !important;
}

#overlay a:hover {
    color: var(--hover-fg-color) !important;
}