html, body{ margin: 0%;padding: 0%;}
/* navigation */
nav{display: flex;
justify-content: space-between;
padding:0 20px;}

.menu{display: flex;}

li{
    list-style-type: none;
    margin: 0 8px;
}
a{text-decoration: none;
color: black;
font-size: 1.5rem;
}
a:hover{color: rgb(9, 207, 65);}
.logo{padding-top: 5px;}


/* hero section */
.hero{ 
    background-image: url('../images/hero\ image.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
   justify-content: center;
   align-items: center;
}
h1{font-family: serif;
font-size: 4rem;
color: white;}

/* image gallery */
#head1{color: black; font-size: 3rem; font-family: serif; padding-left: 3px;}
.paragraph{padding: 3px;}
.Gallery{width: 100%;}
.row{display: flex;
justify-content: center; 
width: 100%;
height: 400px;}
.thumbnail{
width: 30%;
margin: 4px;
background-size: cover;
background-position: top;
background-repeat: no-repeat;}

/* images */
#img1{
    background-image: url('../images/Nature\ 1.jpg');}
#img2{
    background-image: url('../images/Nature\ 2.jpg');}
#img3{
    background-image: url('../images/Nature\ 3.jpg');}
#img4{
    background-image: url('../images/Nature\ 4.jpg');}
#img5{
    background-image: url('../images/mountain\ 1.jpg');}
#img6{
    background-image: url('../images/mountain\ 2.jpg')}
    #img7{
        background-image: url('../images/mountain\ 3.jpg');}
    #img8{
        background-image: url('../images/mountain\ 4.jpg');}
    #img9{
         background-image: url('../images/nature\ 9.jpeg');}
     #img10{
        background-image: url('../images/nature\ 10.jpeg');}
    #img11{
        background-image: url('../images/nature11.jpeg');}
    #img12{
        background-image: url('../images/nature\ 12.jpeg');}

footer{display: flex;
            justify-content: center;
        background-color: rgb(3, 111, 34);}