/* css stylesheet for all three pages index.html,index2.html and index3.html  */
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
body{
    width: 100%;
}

/*navbar css properties for all three pages*/
nav{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.navbar-brand{
    display: flex;
    justify-content: center;
    font-weight: bolder;
    color: rgb(114 114 114 / 90%);
    font-style: italic;
}
.brand-logo{
   
    font-size: 2rem;
}
.navbar-collapse{
    flex-grow: 0;
}


/*css properties for index.html or home page*/
#search-bar{
    margin-top: 100px;
    border: 1px solid black;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    font-size: 24px;
    color:rgb(114 114 114 / 90%);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#search-icon{
    margin-right: 10px;
    margin-left: 10px;
    cursor: pointer;
}
#my-search{
    border: none;
    outline: none;
    width: 100%;
}
#cards-group{
    margin: 50px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: 20px;
    cursor: pointer;
}
.card-body{
    display: flex;
    justify-content: space-between;
}
.icon{
    font-size: 1.5rem;
}
.icon:hover{
    color:red;
}



/*css properties for index2.html or hero details page */
#hero-main{
    border-radius: 20px;
    padding: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;;
}
#img{
    width: 100%;
    height: 100%;
}
#hero-details{
    width: 70%;
    height: 100%;
}
.heading{
    border-radius: 10px;
    background-color: #99C2FF;
    padding: 5px 0px;
}


/*css properties for index3.html or favourite hero's page */
#fv-main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}