/*
#B0AEA4
#F19B00
#FFFFFF
#FDF0D9
#000000
*/
/*header- php does not work, use some free time for crying*/



    .playfair-display-<uniquifier>{
      font-family: "Playfair Display", serif;
      font-weight: <00>;
      font-style: normal;
                                  }
    .test{
        font-family: "Playfair Display", sans-serif;
        font-size: 13px
         }


    #topbar{
        z-index: 10;  
        top: 0; 
        position: fixed; 
        background-color: #F19B00; 
        max-width: 900px; 
        margin: 16px 10%; 
        text-align: center; 
        width: 60%
            }

        #topbar h1{
            width: 50%; 
            float: left; 
            color: white; 
            font-family: "Playfair Display", sans-serif;
            font-size: 40px; 
            padding-left: 1%; 
            padding-right: 1%; 
            padding-top: 1%; 
            margin: 0;
                    }

        #topbar nav ul li{
            color: white; 
            font-family: "Playfair Display", sans-serif;
            font-size: 20px; 
            padding-left: 10px; 
            padding-right: 10px; 
            margin: 0;
                        }

        #topbar img{
            border-radius: 100%
                    }
/*header nav ul li{display: inline;}*/

    header nav ul{
        display: flex; 
        padding: 0; 
        margin: 0; 
                 }

        a:link{
            color: white; 
            text-decoration: none; 
            font-family: "Playfair Display", sans-serif;
              }

        a:visited{
            color: white; 
            text-decoration: none; 
            font-family: "Playfair Display", sans-serif;
                 }

        a:hover{
            color: white; 
            text-decoration: none; 
            font-family: "Playfair Display", sans-serif;
               }

        a:active{
            color: white; 
            text-decoration: none; 
            font-family: "Playfair Display", sans-serif;
                }

            .current{
                color: white; 
                text-decoration: none; 
                text-shadow: 1px 1px 2px black; 
                font-weight: bold;
                    }

/*drop-down bookmark settings*/

    nav{
        margin:0;
        background-color: #F19B00; 
        width: 30%; 
        float: left
        }

/* Removing padding, margin and "list-style" from the "ul", and adding "position:reltive" */
    nav ul{
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
            }

/* Positioning the navigation items inline */
    nav ul li{
            margin: 0 -7px 0 0;
            display:inline-block;
            background-color: #F19B00;
                }

/* Styling the links */
    nav a{
        display:block;
        padding:0 10px;
        color:#FFF;
        font-size:20px;
        line-height: 60px;
        text-decoration:none;
            }

/* Background color change on Hover */
    nav a:hover{
        color: #F19B00;
        background-color: #FFFFFF;
                }

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
    nav ul ul{
        display: none;
        position: absolute;
        top: 100%;
        padding:0 10px;
    }

/* Display Dropdowns on Hover */
    nav ul li:hover > ul{
        display:inherit;
    }

/* Fisrt Tier Dropdown */
    nav ul ul li{
        min-width:170px;
        display:list-item;
        position: relative;
    }


/*contents*/
/*contents*/
    body{
        background-image: url(images/forest2.jpg); 
        background-size: auto; 
        background-repeat: no-repeat; 
        background-position: center; 
        background-attachment: fixed;
        margin: 0; 
        padding: 0;
        }
    main{
        background-color: #FFFFFF; 
        width: 60%; 
        max-width: 2000px; 
        margin-left: 20%; 
        margin-top: 80px; 
        padding-left: 10px; 
        padding-right: 10px
        }
        .contents{
            color: #F19B00; 
            background-color: white; 
            text-align: center
                 }
            .contents h1{
                color: #F19B00; 
                font-family: "Science gothic", sans-serif; 
                text-decoration: underline;
                        }
            .contents h2{
                color: #F19B00; 
                font-family: "Science gothic", sans-serif; 
                text-decoration: underline;
                        }
            .contents h4{
                color: #F19B00; 
                font-family: "Science gothic", sans-serif; 
                        }
            .contents p{
                color: grey; 
                font-family: "Science gothic", sans-serif;
                       }
            #about{
                color: #F19B00;
                background-color: white; 
                text-align: center
                  }
            a.here {
                color: #F19B00;
                text-decoration: underline;
}
            .contents h2 a {
                   color: #F19B00;
                   text-decoration: none; 
}




/*Footer*/
    footer{
        background-color: #F19B00;
        color: white;
        padding: 40px 40px 40px 40px;
        margin-top: 500px; 
        margin-bottom: 0; 
}
    footer p{
        color: white;
        padding: 10px 10px 10px 10px
}