/* 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
'Schoolbell', cursive
*/


html {
    font-family: 'Merriweather', 'Times New Roman', Times, serif;
    font-family: 'Schoolbell', cursive;
    margin: 0;
  padding: 0;
}
body {
    background-color: #fefefe;
}

.wrapper {
    display: grid;
    grid-template-areas:
    "home-link"
    "top-border"
     "top-nav"
     "title-bar"
     "text-container"
     "jump-bar"
     "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"
      "title-bar title-bar title-bar title-bar"
      "text-container text-container text-container text-container"
      "jump-bar jump-bar jump-bar jump-bar"
      "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;
  }

  .title-bar {
  grid-area: title-bar;
  margin: 0;
  width: 100%;

  
}

.title-bar p {
font-family: 'schoolbell', cursive;
text-align: center;
font-size: 2em;
 padding-top: 20px;
 color:#171616;;
 margin: 0;
 text-transform: uppercase;
}

.title-bar h3 {
  text-align: center;
  color: #171616;
}

  .poem-container {
    
    grid-area: text-container;
    position: relative;
     overflow: hidden;
    margin: 20px auto;
    width: 65%;
    height: 400px;
    background-image: url("blue-sky.jpg");
    background-size: cover;
    background-position: center;
}

 .poem-container h2 {
  font-family: 'Merriweather', serif;
  font-size: 1.5em;
  text-align: center;
  color: #171616;
 
  
}

@keyframes slideInOut {
  0%   { transform: translateX(100%); opacity: 0; }
  20%  { transform: translateX(0); opacity: 1; }
  80%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideInOutReverse {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { transform: translateX(0); opacity: 1; }
  80%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}


.line {
  
  width: 100%;
  text-align: center;
  font-family: 'Merriweather', serif;
  font-size: 1em;
  color: #171616;
  opacity: 0;
}

.line1 {
  top: 0%;
  animation: slideInOut 10s ease-in-out 0s infinite;
}
.line2 {
  top: 16.6%;
  animation: slideInOutReverse 10s ease-in-out 1s infinite;
}
.line3 {
  top: 33.2%;
  animation: slideInOut 10s ease-in-out 2s infinite;
}
.line4 {
  top: 49.8%;
  animation: slideInOutReverse 10s ease-in-out 3s infinite;
}
.line5 {
  top: 66.4%;
  animation: slideInOut 10s ease-in-out 4s infinite;
}
.line6 {
  top: 83%;
  animation: slideInOutReverse 10s ease-in-out 5s infinite;
}



mark {
  background-color: rgba(0, 0, 0, 0);
  color: red;
}






.jump-bar {
  grid-area: jump-bar;
  overflow: hidden;
  margin: auto;
  width: 100%;
}

.jump-bar p {
font-family: 'schoolbell', cursive;
text-align: center;
font-size: 1.2em;
}

  .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;

  }