/* Navigation Bar & Sitemap */

nav {
  background-color: #d63702;
  display: flex;
  margin:0px;
  padding: 0px;
  width:100%;
}

#nav-links {
  width: 100%;
  height: 50px;
  padding-top: 0px;
}

#title {
  color: white;
  text-decoration: none;
  text-align: left;
  width: 5%;
  transition: color .25s;
  font-size: 30px;
  font-weight: bold;
}

.nav-link-container {
  width: 5%;
  text-decoration: none;
  color: white;
  padding-top: 0px;
  margin: 0px;
  height: inherit;
  min-height: 100%;
  transition: background-color .25s, font-size .25s;
  align-items: stretch;
}

.nav-link-container:hover {
  background-color: darkred;
}

.nav-link-container:not(#title):hover {
  font-size: 12pt;
}

.nav-link {
  color: white;
  text-decoration: none;
}

#map {
  padding: 5px;
  background-color: lightgrey;
  height: 18px;
  position: relative;
}

#map a {
  color: #27acf9;
  text-decoration: none;
  border: none;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(255, 255, 255, 0);
  transition: border-radius .25s, background-color .25s, color .25s;  
}

#map a:hover {
  color: white;
  background-color: #27acf9;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 2px;
}

/* Main Body Content */

#content {
  --padding-offset: 140px;
  --padding-auto: auto;
  padding-bottom: calc(var(--padding-auto) - var(--padding-offset));
  margin: 0px;
  padding: 5px;
  padding-left: 30px;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

a {
  transition: color .25s;
}

#content a:not(.button, .button-black, .button-confirm, .button-itch)
{
  color: #27acf9;
  text-decoration: underline;
  transition: color .25s, text-decoration-color .25s;
  text-decoration-color: rgba(255, 255, 255, 0);
}

#content a:not(.button, .button-black, .button-confirm, .button-itch):hover {
  color: #2085c0;
  text-decoration: underline;
  text-decoration-color: #2085c0;
}

#content a#content .button, #content a#content .button-itch, #content a#content .button-confirm
{
  color: white;
  transition: all 0.25s;
  text-decoration: none;
}

#content h1 {
  margin: 2px;
  margin-bottom: 10px;
}

#content h2 {
  font-size: 30px;
}

#content h3 {
  font-size: 24px;
}

.container {
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding: 3px;
  padding-bottom: 0px;
  margin-top: 5px;
}

.container-title {
  text-decoration: none;
}

/* Form and Button Config */

textarea, input[type=text], input[type=email] {
  border: solid 1px lightgrey;
  border-radius: 5px;
  transition: border .25s;
  padding: 3px;
  width: calc(100% - 6px);
  
  margin-bottom: 5px;
  margin-top: 1px;
}

textarea:hover, input[type=text]:hover, input[type=email]:hover {
  border: solid 1px grey;
}

textarea {
  font-family: sans-serif;
}

.button, a.button {
  padding: 5px 30px;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  background-color: #27acf9;
  border: solid #2085c0;
  border-width: 0px;
  border-bottom-width: 2px;
  transition: background-color .25s;
  cursor: pointer;
  text-decoration: none;
}

.button:hover, a.button:hover {
  background-color: #2085c0;
}

.button-confirm, a.button-confirm {
  padding: 5px 30px;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  background-color: #67ea3f;
  border: solid #4cab30;
  border-width: 0px;
  border-bottom-width: 2px;
  transition: background-color .25s;
  cursor: pointer;
  text-decoration: none;
}

.button-confirm:hover, a.button-confirm:hover {
  background-color: #4cab30;
}

.button-itch, a.button-itch {
  padding: 5px 30px;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  background-color: rgb(250, 92, 92);
  border: solid rgb(200, 42, 42);
  border-width: 0px;
  border-bottom-width: 2px;
  transition: background-color .25s;
  cursor: pointer;
  text-decoration: none;
}

.button-itch:hover, a.button-itch:hover {
  background-color: rgb(200, 42, 42);;
}

.button-black, a.button-black {
  padding: 5px 30px;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  background-color: rgb(50, 50, 50);
  border: solid rgb(15, 15, 15);
  border-width: 0px;
  border-bottom-width: 2px;
  transition: background-color .25s;
  cursor: pointer;
  text-decoration: none;
}

.button-black:hover, a.button-black:hover {
  background-color: rgb(15, 15, 15);
}

/* Footer */

#font-change {
  display: inline-block;
  color: white;
  background-color: rgb(50, 50, 50);
  font-weight: bold;
  padding: 10px;
  border-top-right-radius: 5px;
  transition: all 0.25s;
  cursor: pointer;
}

#font-change:hover {
  background-color: rgb(15, 15, 15);
}

footer {
  background-color: darkslategrey;
  color: rgb(169, 186, 203);
  bottom: 0;
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px 0px 10px 0px;
}

#footer-link-container {
  display: flex;
  text-align: justify;
  margin-bottom: 10px;
}

.footer-links {
  text-align: center;
  width: 50%;
  text-decoration: none;
}

.footer-links span {
  color: rgb(189, 206, 223);
  text-decoration: underline;
}

.footer-links a {
  color: rgb(169, 186, 203);
  text-decoration: none;
}

.footer-links a:hover {
  color:rgb(201, 211, 144);
}

#extra-info {
  padding: 5px;
  text-align: center;
}

/* Flex Box */

.flex {
  display: flex;
  min-height: calc(100vh - 89px);
  flex-direction: column;
  justify-content: space-between;
}