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

.centered {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 300px;
    padding: 20px;
    font-size: 75px;
    font-weight: bolder;
    font-style: italic;
    /* font-family: 'Gwendolyn', cursive; */
    color:black;
}

#i1, #i4 {
    color: var(--medium);
    -webkit-text-stroke: 2px black;
}

#i2, #i3 {
    color: var(--accent);
    -webkit-text-stroke: 2px black;
}

#homepage {
    position: relative;
    text-align: center;
    max-height: 800px;
    margin-top: 50px;
}

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

#dogBreed {
    font-size: 30px;
    color: black;
    padding: 10px;
}

.img-fluid {
    height: 90%;
}

i {
    padding: 10px;
}

div.class {
    background-color: white;
}

#fas {
    padding-left: 10px;
}

#image {
    border-radius: 50px;
    max-height: 750px;
    border: 2px solid black;
}
@media only screen and (max-width: 990px) {
    .centered {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: 300px;
        padding: 20px;
        font-size: 45px;
        font-weight: bolder;
        font-style: italic;
        color:black;
    }


    .fas {
        display: none;
  }
}