html
{
  scroll-behavior: smooth;
}

body
{
  background-color: hsl(240, 5%, 100%);
  margin-top: 0;
}

h1
{
  color: hsl(240, 70%, 30%);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Roboto;
  font-weight: 100;
  font-size: 350%;
  text-align: center;
}

h2
{
  color: hsl(240, 70%, 40%);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Roboto;
  font-weight: 100;
  font-size: 250%;
}

h3
{
  color: hsl(240, 70%, 40%);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Roboto;
  font-weight: 100;
  font-size: 200%;
}

h4
{
  color: hsl(240, 70%, 40%);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Roboto;
  font-weight: 100;
  font-size: 150%;
}

p
{
  color: hsl(240, 20%, 40%);
  font-family: Roboto;
  font-weight: 300;
  margin-bottom: 0;
  margin-left: 5%;
  font-size: 150%;
}

.menu
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: hsl(240, 20%, 20%);
  color: hsl(240, 50%, 90%);
  font-family: Roboto;
  font-weight: 300;
  font-size: 150%;
}

.menu li
{
  float: left
}

.menu a
{
  color: hsl(240, 50%, 90%);
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.menu a:hover
{
  background-color: hsl(240, 20%, 40%);
}

.menu a:focus
{
  background-color: hsl(240, 30%, 50%);
}

.title_box
{
  margin: auto;
  margin-top: 0;
  margin-bottom: 0;
  background-image: url("images/pangolin_on_tail.webp");
  /* image source: https://www.npr.org/sections/thetwo-way/2016/09/28/495778859/pangolins-the-artichoke-with-legs-earn-top-trade-protection */
  background-position: center; 
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 75%;
}

.title
{
  background-color: hsla(240, 50%, 50%, 40%);
  color: hsl(240, 50%, 80%);
  width: 100%;
  font-family: Roboto;
  font-weight: 300;
  font-size: 300%;
  text-align: center;
  padding-bottom: 5;
}

.page_section
{
  margin: auto;
  margin-bottom: 5%;
  width: 80%;
}

.page_section_a
{
  margin: auto;
  margin-bottom: 2%;
  width: 80%;
}

.page_section_s
{
  margin: auto;
  width: 80%;
}

.page_section_left
{
  width: 50%;
  float: left;
  text-align: center;
}

.page_section_right
{
  margin-left: 50%;
  text-align: center;
}

.wireframe_left
{
  width: 68%;
  float: left;
}

.wireframe_right
{
  margin-left: 70%;
  margin-top: 10;
  text-align: center;
}

.navigation_menu
{
  margin: auto;
  width: 80%;
  color: hsl(240, 20%, 40%);
  font-family: Roboto;
  font-weight: 300;
  margin-bottom: 5%;
  /* margin-left: 5%; */
  font-size: 100%;
}

.insights_menu
{
  margin: auto;
  width: 80%;
  color: hsl(240, 20%, 40%);
  font-family: Roboto;
  font-weight: 300;
  margin-bottom: 5%;
  /* margin-left: 5%; */
  font-size: 100%;
}

.insights
{
  margin: auto;
  width: 90%;
  color: hsl(240, 20%, 40%);
  font-family: Roboto;
  font-weight: 300;
  margin-bottom: 0;
  margin-left: 5%;
  font-size: 100%;
}

.table
{
  margin: auto;
  margin-bottom: 5%;
  width: 80%;
  display: flex;
  justify-content: left;
}

th
{
  font-family: Roboto;
  color: hsl(240, 30%, 70%);
  font-weight: 300;
  font-size: 150%;
  padding-right: 20;
}

td
{
  font-family: Roboto;
  color: hsl(240, 20%, 40%);
  font-weight: 300;
  font-size: 100%;
}