body {
    background-image: url("../images/backgroundblack.jpg");
}
.panel .name {
    font-family: 'Abel', cursive;
    font-size: 120px;
    color: #ed64e8;
    text-shadow: 1px 1px 0;
}

.panel {
    font-size: 22px;
    font-family: 'Righteous', cursive;
}
.funnyGifs {
    font-size: 24px;
    color: silver;
    text-shadow: 
    -1px -1px 0 purple;
}

#addButton {
    margin-left: auto;
    margin-right: auto;
    margin: 10px;
}


#text {
    margin-top: 3%;
    color: gold;
    text-shadow: 1px 1px 0 black;

}

/*gif divs*/

#gifForm {
    text-align: center;
}

#startingButtons {
    margin: 5%;
    text-align: center;
}

#button {
    padding: 10px;
    color: green;
    background: gray;
    border-radius: 25px;
}

.topic {
    font-family: 'Abel', cursive;
}


/*form*/

form {
    text-align: center;
    font-family: 'Abel', cursive;
    font-size: 36;
    color: white;
    -webkit-text-stroke: 1px black;
}

#gif-input {
    margin: 2%;
}

label {
    font-family: 'Righteous', cursive;
}
/* Round Button that user clicks to generate a new button as category */
#addGif {
    text-align: center;
    font-family: 'Righteous', cursive;
    padding: 3%;
    border: 3px solid black;
    border-radius: 50%;
    background: purple;
    color: white;
}
#addGif {background-image: linear-gradient(to right, blue 0%, purple 51%, green 100%)}
/* area where gif images are shown*/
.jumbotron {
    background-color: transparent !important;
}

.jumbotron img {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: center;
}

.item p {
    font-family: 'Righteous', cursive;
    text-align: center;
}