: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;
}

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: 10px;
}

.nav-item {
    padding-left: 50px;
    padding-right: 50px;
}

.hidden {
    display: none;
    opacity: 0;
}

div > h1 {
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}

#breeds {
    text-align: center;
    flex-direction: column;
    font-size: 35px;
    font-weight: bold;
    color: black;
}

#parks {
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    color: black;
}

div > div > a {
    flex-direction: column;
    text-align: center;
    display: block;
    margin: auto;
    font-size: 20px
}

#image {
    width: 50%;
    justify-content: center;
    display: block;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border-radius: 50px;
    max-height: 750px;
    border: 2px solid black;
}

.centered {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 300px;
    padding: 20px;
    font-size: 75px;
    font-weight: bold;
    color:black;
}