/*
html {box-sizing: border-box;}
*/
body 
{
  background-color: #c3d1e4;
  margin: 5% 10%;
  font-family: Arial, Helvetica, sans-serif;
}

h1 
{
  color:blue;
  text-align: center;
  font-family: 'Lobster', cursive; 
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px solid #57b1dc;
  margin-top: 30px;
}

h2 
{
  color: purple;
  /*font-size: 1em;*/
  font-family: 'Lobster', cursive; 
  
}



/* Style for the whole page layout, in this case a Flex Grid of 4 rows and 1 column. */
#whole_page_layout {display: grid; grid-template-rows: [header-start] [content-start] [values-start] [footer-start]; grid-template-columns: [column1] auto;
  grid-template-areas: "header" "main" "values" "footer";}

/* Style for the navigation menu only */
#nav_menu {display: flex; flex-direction: row; justify-content: space-around;border:10px solid #3c3ed1;font-size: 20px; font-family: Arial, Helvetica, sans-serif;}
/*  This piece of code needed to be tweaked when I was trying to get the flexbox menu items to unsquash. It wasn't the List, it was Justify Content = space around, that worked.--> */

/* Style for the container about the website's values. This is a Flexgrid in a COLUMN, not a row. */
#container {display:flex; flex-direction: column ;border: 3px solid #783F27; font-size: 30px;}


/* --------------------------MEDIA QUERIES AT THE END---------------------------------------------*/

@media screen and (max-width: 40em)
{
  h1 {font-family: Arial, Helvetica, sans-serif;}
  h2 {font-family: Arial, Helvetica, sans-serif;}
  body {background-color: bisque; font-size: smaller;}
  #nav_menu {flex-direction: column; font-size: x-small;background-color: white;}
}