:root {
  --sizeTopNav: 10vh;
  --sizeBottomNav: 5vh;
  --sizeMinContentSize: calc(100vh - var(--sizeTopNav) - var(--sizeBottomNav) - var(--spacing-min) * 2);
  --alaskaRailRoadGold: rgb(254, 203, 0);
  --alaskaRailRoadBlue: rgb(0, 47, 95);
  --white: #FFFFFFFF;
  --black: #000;
  --primaryText: var(--white);
  --secondaryText: var(--black);
  --primaryBackground: var(--alaskaRailRoadBlue);
  --altBackground: var(--alaskaRailRoadGold);
  --spacing-min: 2rem;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--primaryText);
}

img {
  margin: 0;
  padding: 0;
}

p, h1, h2, h3 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: Arial, serif;
}

a {
  color: inherit;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: inherit;
}
a:active {
  text-decoration: none;
  color: inherit;
}

nav.top-nav {
  background-color: var(--primaryBackground);
  width: 100vw;
  height: var(--sizeTopNav);
  display: grid;
  grid-template-columns: 33vw auto;
}
nav.top-nav .logo {
  max-height: var(--sizeTopNav);
}
nav.top-nav .logo img {
  max-height: var(--sizeTopNav);
}
nav.top-nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
}
nav.top-nav ul li {
  align-self: center;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
}
nav.top-nav ul li a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  text-align: center;
}
nav.top-nav ul li a:hover {
  background-color: var(--altBackground);
  color: var(--secondaryText);
}

.main-content {
  min-height: var(--sizeMinContentSize);
  max-width: 100vw;
  padding: var(--spacing-min);
  color: var(--secondaryText);
}

footer.bottom-nav {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: left;
  background-color: var(--primaryBackground);
  width: 100%;
  height: var(--sizeBottomNav);
}
footer.bottom-nav p {
  margin-top: auto;
  margin-bottom: auto;
}