index.css

/************ remove default margin ***********/
*{
    margin:0;
}



/************ setting  background image to body ***********/
body{
    background:url("https://cdn.pixabay.com/animation/2023/01/25/07/54/07-54-16-78_640.png");
    background-repeat: repeat;
    background-size:contain;
}



/************* this container contain entire superhero html page styling  *************/
#app {
   background-color: rgb(7, 7, 94,.3);
    width:100vw;
    height:100vh;
}



/************* styling heading and search *************/
#app-name-and-search-container {
    /* border:solid; */
    width:100%;
    height:30%;
   display:flex;
   flex-direction:column;
   align-items: center;
  justify-content: space-evenly;
}



/************* styling heading  *************/
#app-name-and-search-container h3{
    font-family:Impact;
    font-size:2rem;
    border-bottom: 4px solid white;
    color:rgb(5, 5, 102);
}
#app-name-and-search-container h3::first-letter{
   color:rgb(5, 5, 102);
   font-size:2.3rem;
   border-bottom: 5px solid;
}
#app-name-and-search-container h3:hover{
    border-bottom: 5px solid rgb(255, 255, 255);
    color:rgb(251, 251, 251);

}



/************* styling  search box and submit button  *************/
#search-container{
    width:100%;
    height:40%;
   display:flex;
   flex-direction: column;
   align-items: center;
  justify-content: space-around;

}
#search-container form{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
   justify-content: center;
}
#search-container form input{
    width:30%;
    height:100%;
    margin-right: 10px;
    border-radius: 10px;
    border: .2px solid rgb(184, 184, 191);
    box-shadow: 0 0 6px 3px midnightblue;
    padding-inline: 10px;
    font-size: 1.1rem;
}
#search-container form button{
    width:10%;
    height:100%;
    border-radius: 10px;
    border: .2px solid rgb(184, 184, 191);
    font-size:1rem;
}
#search-container form button:hover{
    color:white;
    background-color: rgb(154, 8, 203);
    border: 2px solid rgb(255, 255, 255);
}



/************* styling favorite link *************/
#search-container a{
    text-decoration: none;
    font-size: 1.3rem;
    margin-top: 10px;
    color:rgb(244, 245, 255);
    margin-left:-20px;
}
#search-container a i{
  color:#ffed28;
}
#search-container a:hover{
    font-size: 1.2rem;
    color:white;
    text-decoration:underline;
 }




/****************************** styling list of superhero container that container number of superhero ******************************* */

/************* styling list + scrollbar *************/
#superhero-list-container{
   
    width:100%;
    height:60%;
    /* border:solid; */
    overflow-y: scroll;
    display:flex;
    justify-content: space-evenly;
    align-items:center;
    flex-wrap: wrap; 
    margin-top: 40px;

}
#superhero-list-container::-webkit-scrollbar{
width:12px
}
#superhero-list-container::-webkit-scrollbar-track{
    background: rgb(7, 7, 94,.3);
    border-radius: 20px;
}
#superhero-list-container::-webkit-scrollbar-thumb{
   
    background:rgb(247, 247, 252);
    /* border:3px solid orange; */
    border-radius: 20px;
}
#superhero-list-container::-webkit-scrollbar-thumb:hover{
   
    box-shadow:0 0 5px 2px  rgb(0, 0, 0);;
}



/************* styling each superhero container *************/
.superhero-container {
    width:15%;
    height:60%;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 50px;
    margin-top: 2px;
    box-shadow:0 0 10px 2px  rgb(0, 0, 0);;
}



/************* doing style on superhero image  *************/
.superhero-image-container{
    width:100%;
    height:69%;
    display:flex;
    justify-content: center;
   
}
.superhero-image-container img{
    width:100%;
    height:100%;
    border-radius: 10px;
}



/* ************ styling text and button part of superhero container *************/
.superhero-body-container{
    width:100%;
    height:30%;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center;
    /* border: solid; */
    box-shadow: 0 -5px 2px 1px gray;
}
.superhero-body-container p{
    height:30%;
}
.superhero-body-container p:nth-child(1){
    font-family: Impact;
    letter-spacing: 1px;
    padding-left:1px ;
    padding-right: 1px;
    text-align: center;
    /* margin-top:5px; */
     
   
}

.superhero-body-container p:nth-child(2){
   font-family: sans-serif;
    margin-top:10px;
   
}
.superhero-body-container p i{
    font-size: 1.3rem;
    margin-right: 5px;
    
 }
.superhero-body-container p i:hover{
    font-size: 1.5rem;
    margin-right: 5px;
    
 }
.superhero-detail-link{
    /* border:solid; */
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    cursor:pointer;
}
.superhero-detail-link a{
    color:white;
    text-align: center;
  
}
.superhero-detail-link a:hover{
    color:rgb(17, 8, 93);
    text-align: center;
    font-family: Impact;
}




/************* adding media queries *************/
@media  screen and (max-width:1020px) {
    .superhero-container {
        width:21%;
        height:70%;
      
    }
    .superhero-name-container {
        font-size: 1rem;
    }
    #search-container form{
        width:150%;
        height:100%;
    
    }
    #search-container a{
       font-size: 1.3rem;
    }

}

@media  screen and (max-width:700px) {
    .superhero-container {
        width:35%;
        height:70%;
      
    }
    #search-container form{
        width:200%;
        height:100%;
    
    }
    #search-container a{
       font-size: 1.5rem;
    }
   
    
}

@media  screen and (max-width:520px) {
    .superhero-container {
        width:40%;
        height:70%;
      
    }
    #search-container form{
        width:200%;
        height:100%;
    
    }
    #search-container a{
       font-size: 1.5rem;
    }
   
    
}

@media  screen and (max-width:400px) {
    .superhero-container {
        width:60%;
        height:70%;
      
    }
    #app-name-and-search-container h3{
        font-size:1.5rem;
    }
    #search-container form button{
        font-size:.8rem;
    }
    
    #search-container a{
        font-size: 1rem;
        color:white;
    }

    #search-container a:hover{
        font-size: 1rem;
      
    }

    
}