:root {
  --lightgray: #f0f0f0;
  --lightgrey: #f0f0f0;
  --offwhite: #f7ffcc;
  --darkgrey: #383838;
  --darkgray: #383838;
  --charcoal: #171717;
  --coal: #171717;
  --darknavy: #181e24;
  --navy: #1d2f40;
  --brand: #fcba03;
  --thunder: #fcba03;
  --thunderbot: #fcba03;
  --brandlight: #fccf51;
  --brightthunder: #fccf51;
  --branddark: #d19e11;
  --darkthunder: #d19e11;
  --black: black;
}
body, html {
  background: var(--lightgray);
  font-family: 'Poppins', sans-serif;
  border: none;
  padding: 0;
  margin: 0;
  height: 100%;
  height: 100%;
  width: 100%;
}
nav {
  background: var(--thunder);
  display: block;
  vertical-align: middle;
}
button {
  background-color: var(--thunder);
  display: block;
  border: none;
  font-family: 'Poppins', sans-serif;
  vertical-align: middle;
  padding: 0px;
}
button.alt {
  background-color: var(--offwhite);
  display: block;
  border: none;
  font-family: 'Poppins', sans-serif;
  vertical-align: middle;
  padding: 0px;
}
nav > a {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 25px 0px 25px;
  transition: 0.3s all;
  box-shadow: inset 0 0px 0 4px var(--brand);
}
button a {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 25px 0px 25px;
  transition: 0.3s all;
  font-family: 'Poppins', sans-serif;
  box-shadow: none;
}
button a:hover {
  background: var(--brightthunder);
}
button.alt a:hover {
  background: var(--lightgrey);
}
nav > a:hover {
  background: var(--brightthunder);
}
nav > a > p {
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  color: var(--black);
}
button a p {
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  color: var(--black);
  font-family: 'Poppins', sans-serif;
}
nav > a > img {
  height: 48px;
  vertical-align: middle;
}
article {
  padding: 60px 70px 30px 70px;
}
nav.header {
  background: var(--brandlight);
  font-size: 30px;
}


/* MODAL BOX */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


a {
  box-shadow: inset 0 -5px 0 -1px var(--brand);
  text-decoration: none;
  color: black;
  transition: 0.3s all;
}
a:hover {
  /*box-shadow: inset 0 5px 0 -1px var(--brand);*/
  box-shadow: inset 0 -5px 0 -1px var(--brandlight);
  color: charcoal;
}

#footer {
  width: 100%;
}

body {display: flex; flex-direction: column;}
#content {flex: 1 0 auto;}
#footer {flex-shrink: 0;}