/* removing margin and padding from all elements */
* {
    margin: 0;
    padding: 0;
}

/* setting body font styles */
body {
    font-family: 'Comic Neue', cursive;
    color: black;
    font-size: 25px;
    font-weight: 700;
}

/* setting narbar font styling */
.navbar-item {
    font-family: 'Comic Neue', cursive;
    font-size: 40px;
}

/* formating intro spacing */
#intro {
    text-align: center;
    padding: 3%;

}

/* flex box positioning for marvel card container */
#cardContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* formating for every marvel card; positioning, colors, sizing, borders etc */
.marvelCard {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: center;
    box-shadow: 2px gray;
    background-color: rgb(214, 32, 32);
    width: 300px;
    height: auto;
    border-radius: 15px;
    border: 20px;
    margin: 2%;
}

/* flex box positing for marvel container */
#giphyContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* styling for each individual giphy card; color, sizing, borders etc */
.giphyCard {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 28%;
    height: auto;
    background-color:rgb(214, 32, 32);
    border: 20px solid rgb(214, 32, 32);  
    border-radius: 15px; 
    margin: 1%
}

/* setting properties for hover over marvel card; yellow border, cursor pointer, opacity */
.marvelCard:hover {
    cursor: pointer;
    border:yellow;
    border-width: 15px;
    border-style: solid;
    opacity: 0.5;
}

/* setting properties for hover over giphy card; yellow border, cursor pointer, inc in size */
.giphyCard:hover {
    cursor: pointer;
    border:yellow;
    border-width: 15px;
    border-style: solid;
    width: 32%;
    height: auto;
}

/* responsive desgined; when screen size <576px marvel cards and giphy display as single column with blue background */
@media screen and (max-width: 680px) {
    .marvelCard {
        width: 90%;
        height:auto;
        background-color: rgb(6, 9, 177);
    }

    .giphyCard {
        width: 90%;
        height:auto;
        background-color: rgb(6, 9, 177);
        border-color: rgb(6, 9, 177);
    }

}