/* variables/color scheme for page */
:root {
    --black: black;
    --darkest: rgb(180, 78, 9);
    --dark: rgb(150, 102, 40);
    --medium: rgb(179, 139, 83);
    --light: rgb(224, 199, 165);
    --accent: rgb(243, 147, 92);
    --white: white;
}

/* this makes the drop down menu for the find parks have space from the jumbotron image */
.dropdown {
    margin-top: 5%;
}

/* MAP styling */
#map {
    margin-top: 2.5%;
    height: 100%;
}

#mapFrame {
    width: 100%;
    height: 600px;
}
/* END map styling */

/* this gives the maps the property of hidden (until js makes it visible when selected from drop down menu */
.hidden {
    display: none;
}

/* this makes the favorite button hidden (until js makes it visible when clicked) */
.hidden1 {
    display: none;
    opacity: 0;
}

/* this gives the favorite button styling */
#favParks {
    box-sizing: border-box;
    background-color: var(--darkest);
    border-radius: 5px;
    color: black;
    display: grid;
    font-size: 17px;
    text-align: center;
    cursor: pointer;
    width: 250px;
    height: 35px;
    border: 1px solid black;
    font-weight: bold;
    margin: auto;
    padding: 10px;
}

/* this gives styling to the text that displays park attributes */
#parkAtt {
    list-style: none;
    text-align: center;
    justify-content: center;
    margin-top: 5%;
}

/* this gives styling to the drop down button */
#dropdownMenuButton {
    background-color: var(--medium)
}

/* code for the background */
#dogParkName {
    font-size: 35px;
    font-weight: bold;
}

.dogParkInfo {
        font-size: 20px;
        flex-wrap: wrap;
        margin-left: 20px;
        justify-content: center;
}

/* THIS IS THE CODE FOR THE BACKGROUND IF WANTED OTHERWISE DELETE  */

html, body {
    width: 100%;
    height:100%;
}

body {
    background: linear-gradient(-45deg, var(--light), var(--dark), var(--accent), var(--darkest));
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

i {
    padding-left: 10px;
    padding-right: 10px;
}

.fas fa-heart {
    padding: none;
}

.nav-item {
    padding-left: 50px;
    padding-right: 50px;
}
/* END code to background */