.p1 {
    font-family: 'Roboto Slab', serif;
    width:50em;
}

h1 {
    font-family: 'Montserrat', sans-serif;
     background-color:#f9ef22;
  padding:20px;
  padding-left: 500px;
  border-style:double;
  border-width:25px;
  border-color:#CACCCE;
    color:snow;
        margin:23px;
        margin-left: 50px;
        margin:auto
}

h2 {
     font-family: 'Playfair Display', serif; 
    
}

h3 {
    font-family: 'Playfair Display', serif;
    
}

h4{
    font-family: 'Playfair Display', serif;
    
}

ul {
     font-family: 'Fjalla One', sans-serif;
}
body {
    background-color:#b2aaa7;
}

div.navBar ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0px;
    background-color:#FFFFFF;
    overflow: hidden; 
}

iframe {
    width: auto
}



div.navBar ul li a {
    float: left;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 14px;
    padding-top: 14px;
    display: inline-block;
    text-decoration: none;
}

div.navBar ul li a:hover {
    background-color: cornflowerblue;
    
}

.active{
    background-color:gray;
}


@media screen and (min-width: 480px) {
    body {
        background-color: darkgray;
    }
div.navBar ul{ 
        list-style-type: none;
    margin: 0px; 
    padding: 0px;
    background-color:cornsilk;
    overflow: hidden; 

        }
    
div.navBar ul li a {
    float: left;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 14px;
    padding-top: 14px;
    display: inline-block;
    text-decoration: none;
}

div.navBar ul li a:hover {
    background-color: yellow;
    
}

.active{
    background-color:gray;
}

    }
}