body {
    background-color: #AFC97E;
    height: 100%;
    margin-bottom: 0%;
    padding: 0;
    font-family: 'Roboto', sans-serif;
     
}

p {
    font-family: 'League Gothic', sans-serif;
    font-size: x-large;
}

/* nav bar */

nav ul {
    list-style: none;
    text-align: center;
    background-color: #FFDF64;
    margin: 0 auto;
    padding: 0;
}

nav li {
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    margin: 2.75%;
    
}

nav a {
    text-decoration: none;
    color: #877B66;
    display: block;

}

nav a:hover {
    background-color: white;
}

/* headings */

h1 {
    text-align: center;
    font-size: 60px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #618A61;
  
}

h2 {
    text-align: center;
    font-style: italic;
    
}
/* style ids */

#map {
    max-width: 600px;
    max-height: 500px;
    width: 98%;

}


/* photos */


.photo1 {
    background-position: center;
    background-image: url("https://c.pxhere.com/photos/35/e8/planet_green_natural_earth_ecology_environment_eco_natural_design-853847.jpg!d");
    background-repeat: no-repeat;

    
}

.photo2 {
    background-position: center;
    background-image: url("https://c.pxhere.com/photos/d0/38/recycle_reuse_recycling_recyclable_symbol_reused_logo-1146683.jpg!d");
    background-repeat: no-repeat;
    
}

.photo3 {
    background-image: url("https://c.pxhere.com/photos/30/9e/earth_globe_recycling_world_environment_ecology_symbol_environmentally_friendly_energy_protection-1144553.jpg!d");
    background-position: center;
    background-repeat: no-repeat;
    
}

/* Style classes */

.h1-span {
    background-color: #FFDF64;

}

.h2-span {
    background-color: #AFC97E;
}


.textright {
    text-align: right;
    margin-left: 55%;
    padding: 5%;
    background-color: rgb(250,70,22,0.6);

}

.form {
    text-align: center;
}




/* footer */

footer {
    height: 150px;

    
   
}


.media-buttons {
   text-align: center;
}

.media-buttons > li {
    display: inline;
}

.media-buttons i {
    font-size: 150%;
    margin: 1%;
    padding: 5%;
    color: rgb(115, 147, 179);
}


/* Media Queries */

@media screen and (max-width: 320px) {
    .textright {
    text-align: center;
    margin-left: 0%;
    }
    
}

@media screen and (max-width: 320px) {
    .h1-span {
    font-size: 50px;
    }
    
}



@media screen and (max-width: 800px) {
    .textright {
    text-align: center;
    margin-left: 0%;
    }

}