/* COLOURS
Background grey (from image): #f6f6f6
Mid grey: #c4c4c4
Dark grey: #626262
Dark green: #0c4c4c
Lighter green: #245D5D
Orange: #d96031
*/

/* FONTS
'Merriweather', 'Times New Roman', Times, serif
'Raleway', 'helvetica', sans-serif
*/


html {
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    
    
}

body {
    background-color: #fefefe;
}

.wrapper {
    display: grid;
    
    grid-template-areas:
    "home-link"
    "top-border"
     "top-nav"
     "text-container"
     "bot-border"
     "footer";
  }

  @media (min-width: 800px) { 
    .wrapper {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
      "home-link top-nav top-nav top-nav"
      "top-border top-border top-border top-border"
      "text-container text-container text-container text-container"
      "bot-border bot-border bot-border bot-border"
     "footer footer footer footer";
  }
}






/* HEADER */

.home-link {
    grid-area: home-link;
   
    padding: 14px 16px;
    
}

.home-link a {
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    color: #245D5D;
    text-decoration: none;
    font-size: 1em;
}


.topnav {
    grid-area: top-nav;
    overflow: hidden;
  }
  

  .topnav a {
    float: right;
    display: block;
    color: #626262;
    text-align: center;
    padding: 14px 16px;
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    text-decoration: none;
    font-size: 1em;
  }
  
 
  .topnav a:hover {
    color: #d96031;
  }
  
  
  .topnav a.active {
    background-color: #626262;
    color: #FEFFFF;
  }
  
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  } 

  .top-border {
    grid-area: top-border;
    background-color: #245D5D;
    height: 1px;
  }

  .text-container {
    grid-area: text-container;
    background-image: url("/images/paper_fibers.png");
    margin: 20px auto;
    padding: 50px 100px 70px 100px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    border-radius: 8px;
}

.text-container h2 {
  font-family: 'Merriweather', serif;
  font-size: 1.5em;
  text-align: left;
  
}

.text-container p {
  font-family: 'Merriweather', serif;
  font-size: 1em;
  line-height: 1.6;
  text-align: left;
  
}
mark {
  background-color: rgba(0, 0, 0, 0);
  color: rgba(5, 5, 5, 0);
}

  hr { 
    display: block;
    margin-top: 3em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
    border-color: red;
  } 


  .bot-border {
    grid-area: bot-border;
    background-color: #245D5D;
    height: 1px;
  }

.footer {
  grid-area: footer;
  overflow: hidden;
}

.copyright {
  float: left;
    display: block;
    text-align: right;
    padding: 4px 16px;
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    
    color: #626262;
    font-size: 0.8em;

  }
  


  .footer a {
   
    float: right;
    display: block;
    text-align: right;
    padding: 4px 16px;
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    background-color: #FEFFFF;
    color: #626262;
    text-decoration: none;
    font-size: 0.8em;

  }