/* Styling the .HEADER */
.header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  font-family: Arial;
}

.header-h1 {
  font-size: 3em;
  text-decoration: underline;
  margin-bottom: 0px;
}

.header-h2 {
  margin-top: 0px;
}
 /* End styling for .HEADER */

 /* ######################## */

 /* Styling the .NAV */
 /* styling bar */
 .topnav {
   overflow: hidden;
   background-color: #333;
 }

 /* styling links */
 .topnav a {
   float: left;
   display: block;
   color: #f2f2f2; 
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-family: Arial;
 }

 .topnav a:hover {
   background-color: #ddd;
   color: black;
 }
  /* End styling for .NAV */

  /* ######################## */

  /* Styling for 3 columns */
 .column {
   float: left;
   width: 31%;
   padding: 8px;
 }

 p {
   line-height: 1.5;
 }
 p:before { content: "\00a0 "; }


 

 /* Look further into why this is needed */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 /* responsive layout - makes the three columns stack on top of each other instead of next to each other */
 @media screen and (max-width:750px) {
   .column {
     width: 100%;
     padding: 0px
   }
   h2 {
     font-size: 40px;
   }
   p {
    font-size: 20px;
    margin:0;
    padding: 0px;
  }
  .hide {
    display: none;
  }
 }

  /* End Styling for 3 columns */

  /*Styling footer */
  .footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
  }
  /* End Styling for footer */

  /* ######################## */