@charset "utf-8";
/* CSS Document for elements shared across all pages*/

@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

:root {
	--dark-bg-color: #252627;
	--light-bg-color: #D1D1D1;
	--accent-1-light: #3A7CB4;
	--accent-1-dark: #174D7E;
	--accent-2-light: #FFAD05;
	--active-link-color: #2C5D89;
	--footer-color: #4C4D4E;
	--logo-font: 'Righteous', cursive;
	--button-fade-time: 0.3s;
	--navbar-height: 5rem;
}

body { 
	background-color: var(--dark-bg-color);
	color: #FFFFFF;
	font-family: "Tahoma";
	margin: 0;
}

h1 {
	text-align: center;
}

/* Navbar */
.navbar {
	background-color: var(--accent-1-dark);
	position: fixed;
  	top: 0;
	width: 100%;
	height: var(--navbar-height);
}

.logo {
	float: left;
	width: 50%;
	padding-left: 1em;
	font-family: var(--logo-font);
	vertical-align: middle;
	display: inline-block;
	left: 0;
}

.logo img {
	height: 4.5rem;
	display: inline-block;
	vertical-align: middle;
}

.logo-text {
	display: inline-block;
	vertical-align: middle;
	line-height: 1rem;
	font-size: 1.5rem;
	text-decoration: none;
	color: #FFFFFF;
	-moz-transition: all var(--button-fade-time) ease-in;
  	-o-transition: all var(--button-fade-time) ease-in;
  	-webkit-transition: all var(--button-fade-time) ease-in;
  	transition: all var(--button-fade-time) ease-in;
}
.logo-text:hover {
	font-weight: bold;
	color: #FFA500;
	-moz-transition: all var(--button-fade-time) ease-in;
  	-o-transition: all var(--button-fade-time) ease-in;
  	-webkit-transition: all var(--button-fade-time) ease-in;
  	transition: all var(--button-fade-time) ease-in;
}

.navbuttons {
	float: right;
	vertical-align: middle;
	height: var(--navbar-height);
	display: inline-block;
}

.navbuttons ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: var(--navbar-height);
}

.navbuttons li {
	float: left;
}

.navbuttons li a {
	display: table-cell;
	color: white;
	text-align: center;
	padding: 0em 1em 0 1em;
	text-decoration: none;
	font-weight: bold;
	height: var(--navbar-height);
	vertical-align: middle;
	font-size: 1.25rem;
}

/* Active link */
.active {
	background-color: var(--active-link-color);
}

.navbuttons a:hover, .navbuttons a:active {
  background-color: var(--accent-1-light);
}

.navbar:after {
	content: "";
	display: table;
	clear: both;
}	  

/*Footer*/
.footer {
	position: relative;
	margin-top: 25vh;
	bottom: 0;
	width: 100%;
	text-align: center;
	background-color: var(--footer-color);
	color: #FFFFFF;
	font-family: "Tahoma";
	padding-top: 0.75em;
	padding-bottom: 0.25em;
}

.footer a { 
	color: #FFFFFF;
	font-family: "Tahoma";
	padding-top: 0.75em;
	padding-bottom: 0.25em;
}

.footer a:hover { 
	font-weight: bold;
	color: #3A7CB4;
	-moz-transition: all var(--button-fade-time) ease-in;
  	-o-transition: all var(--button-fade-time) ease-in;
  	-webkit-transition: all var(--button-fade-time) ease-in;
  	transition: all var(--button-fade-time) ease-in;
}