header {
    background-image: url('../images/rpf_header.PNG');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

h1 {
    display: grid;
    grid-template: 140px / 100%;
    text-align: center;
    text-shadow: 1px 1px 2px white ;
    align-items: center;
    font-size: 280%;
    font-style: italic;
}


nav {
    display: grid;
    grid-template: 40px / 20% 20% 20% 20% 20%;
    list-style-type: none;
    border-bottom: 6px ridge rgb(156, 148, 148);
}
nav li {
    text-align: center;
    align-self: center;
}
nav a {
    text-decoration: none;
    font-size: 180%;
    font-weight: 600;
    font-style: italic;
    color: yellow;
    text-shadow: 1px 0px 1px black ;
}

.slicknav_menu {
    display: none;
}

footer {
    border-top: 6px ridge rgb(156, 148, 148);
    padding-bottom: 1em;
    padding-top: 1em;
}
footer p {
    text-align: center;
    align-self: center;
    font-size: 120%;
    font-weight: bold;
    color: yellow;
    text-shadow: 1px 1px 2px black;
}

/* Media Queries */

@media only screen and (max-width: 767px) {
  #nav_menu {
    display: none;   /* hides nav menu */
  }

  .slicknav_menu {
    display: block;
    background: orangered !important;
    padding: 3px !important;
  }

  #mobile_menu {
    display: block;     /* displays mobile menu */
  }
  #mobile_menu ul {
    background-color: orange;
  } 
  #mobile_menu a {
    background-color: orangered;
  } 
  #mobile_menu a:hover, #mobile_menu a:focus {
    color: orange;
  } 
}


@media only screen and (max-width: 780px) {
    header h1 {
        font-size: 260%;
    }
    nav a {
        font-size: 160%;
        
    }
    footer p {
        font-size: 100%;
        margin-right: .5em;
        margin-left: .5em;
    }
}
@media only screen and (max-width: 580px) {
    header h1 {
        font-size: 240%;
    }

    nav a {
        font-size: 130%;
    }
}
@media only screen and (max-width: 500px) {
     nav a {
        font-size: 120%;
    }
}
@media only screen and (max-width: 470px) {
    header h1 {
        font-size: 230%;
    }
      header h2 {
    font-size: 220%;
    }
    
}
@media only screen and (max-width: 440px) {
    header h1 {
        font-size: 210%;
        margin-left: .5em;
        margin-right: .5em;
    }
    nav a {
        font-size: 100%;
    }
}
@media only screen and (max-width: 382px) {
     nav a {
        font-size: 90%;
    }
}
@media only screen and (max-width: 350px) {
     nav a {
        font-size: 80%;
    }
}