@media (min-width: 1200px) and (max-width: 2500px) {
    body {
        #card-container::-webkit-scrollbar{
            display: none;
                }
                #card-container{
            margin-top: 10px;
            overflow-x: scroll;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
             width: 1100px;
             height: 500px;
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            background-color: rgba(255, 229, 115, 0.678);
            border-radius: 20px 20px 20px 20px;
            
           
          
        }
        #top-header{
            margin-top: 50px;
            display: flex;
        }
        #div_01{
            padding-top: 20px;
            height: 50px;
            width: 70%;
            background: #0022b8;
            border-radius: 50px 10px 0 0;
          
        }

        #div_02{
            padding-top: 20px;
            height: 50px;
            width: 148px;

        }
  
        #top-header>div>div>a{       
            text-decoration: none;
            color: aliceblue;
            margin-left: 20px;
            font-size: x-large; 
            text-shadow:1px 1px 4px rgb(174, 238, 196);
        }
        #top-header>div>div{
            margin-left: 100px;
        }

        #top-header>div>img{  
            margin-top: -50px;
            float: right 20%;     
            height: 150px;
            width: 150px;
        }
    
        #div_03{
           float: right;
           border-radius: 10px 0 0 0;
            width: 30%;
            background: #0022b8;
            
            
        }

        #filter-Menu{
            margin-top: 10px;
            align-items: center;
            display: flex;
            height: 50px;
            width: 100%;
            background-color: rgb(0, 0, 0);
            border-radius: 0 0 50px 0;
        }
        #filter-Menu>div{
            float: left;
            align-items: center;
            display: flex;
            height: 30px;
            line-height: 30px;
           width: auto;
            
            border-radius: 0 0 50px 0;
        }
     
        #filter-Menu>div>:nth-child(1){
            margin-left: 100px;
        }
        #filter-Menu>div>:nth-child(2){
            margin-left: 0px;
        }
        #filter-Menu>div>p{
            margin-left: 15px;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
            font-size: large;
            align-items: center;
            color: rgb(255, 255, 255);
        }
        #filter-Menu>div>select{
            margin: 20px;
            font-size:small;
            align-items: center;
           background-color: rgb(2, 2, 113);
            color: rgb(250, 247, 87);
            border: none;
            text-shadow:2px 2px 4px rgb(0, 0, 0);
          
        }
        #search-btn{
            margin-left: 20px;
        }

        #card{
            width: 150px;
            height: 270px;
           border-radius: 10%;
            margin: 10px;
            margin-left: auto;
            margin-right: auto;
                       }
        
        #card>img{
            
            width: 150px;
            height: 150px;
            border-radius: 10%;
            transition: 0.2s;
                    }
        #card>img:hover{
           cursor: progress;
            width: 170px;
            height: 170px;
                }
        #h4-id{
            margin-left: 10px;
            margin-top: -1px;
            margin-bottom: -15px;
            font-style: italic;
            color: green;
        }
        #p_id{
            margin-left: 10px;
            margin-bottom: -15px;
        }
      
    }
  }


  @media (min-width: 800px) and (max-width: 1200px) {
    body {
        #card-container::-webkit-scrollbar{
            display: none;
                }
                #card-container{
            margin-top: 10px;
            overflow-x: scroll;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
             width: 780px;
             height: 500px;
            display: grid;
            grid-template-columns: auto auto auto auto ;
            background-color: rgba(255, 229, 115, 0.678);
            border-radius: 20px 20px 20px 20px;
            
           
          
        }
        #top-header{
            margin-top: 50px;
            display: flex;
        }
        #div_01{
           padding-top: 20px;
            height: 50px;
            width: 100%;
            background: #0022b8;
            border-radius: 50px 10px 0 0;
          
        }
        #div_01>div{
           
            height: 50px;
            width: 100%;
            
            border-radius: 50px 10px 0 0;
          
        }

        #div_02{
           
            padding-top: 20px;
            height: 50px;
            width: 148px;

        }
  
        #top-header>div>div>a{       
            text-decoration: none;
            color: aliceblue;
            margin-left: 20px;
            font-size: x-large; 
            text-shadow:1px 1px 4px rgb(174, 238, 196);
        }
        #top-header>div>div{
            margin-left: 80px;
        }

        #top-header>div>img{  
            margin-top: -50px;
            float: right 20%;     
            height: 150px;
            width: 150px;
        }
    
        #div_03{
           float: right;
           border-radius: 10px 0 0 0;
            width: 10%;
            background: #0022b8;
            
            
        }
        #filter-Menu{
            overflow-y: scroll;
            align-items: center;
            
            height: 50px;
            width: 100%;
            background-color: rgb(0, 0, 0);
           
        }
        #filter-Menu::-webkit-scrollbar{
            display: none;
           
        }
        #filter-Menu>div{
           
            align-items: center;
            display: flex;
            height: 50px;
            width: 1000px;
            background-color: rgb(0, 0, 0);
           
        }
        #filter-Menu>:nth-child(1){
            margin-left: 100px;
        }
        #filter-Menu>div>p{
           margin-left: 10px;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
            font-size: large;
            align-items: center;
            color: rgb(255, 255, 255);
        }
        #filter-Menu>div>select{
            font-size:small;
            align-items: center;
           background-color: rgba(43, 46, 46, 0);
            color: rgb(250, 247, 87);
            border: none;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
          
        }
        #search-btn{
            margin-left: 20px;
        }

        #card{
            width: 150px;
            height: 270px;
           border-radius: 10%;
            margin: 10px;
            margin-left: auto;
            margin-right: auto;
                       }
        
        #card>img{
            
            width: 150px;
            height: 150px;
            border-radius: 10%;
            transition: 0.2s;
                    }
        #card>img:hover{
           cursor: progress;
            width: 170px;
            height: 170px;
                }
        #h4-id{
            margin-left: 10px;
            margin-top: -1px;
            margin-bottom: -15px;
            font-style: italic;
            color: green;
        }
        #p_id{
            margin-left: 10px;
            margin-bottom: -15px;
        }
      
    }
   
  }

  @media (min-width: 500px) and (max-width: 800px) {

    body {
        #card-container::-webkit-scrollbar{
            display: none;
                }
                #card-container{
            margin-top: 10px;
            overflow-x: scroll;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
             width: 600px;
             height: 400px;
            display: grid;
            grid-template-columns: auto auto auto;
            background-color: rgba(255, 229, 115, 0.678);
            border-radius: 20px 20px 20px 20px;
            
           
          
        }
        #top-header{
            margin-top: 50px;
            display: flex;
        }
        #div_01{
           padding-top: 20px;
            height: 30px;
            width: 100%;
            background: #0022b8;
            border-radius: 50px 10px 0 0;
          
        }
        #div_01>div{
           
            height: 30px;
            width: 100%;
            
            border-radius: 50px 10px 0 0;
          
        }

        #div_02{
           
            padding-top: 20px;
            height: 30px;
            width: 148px;

        }
  
        #top-header>div>div>a{       
            text-decoration: none;
            color: aliceblue;
            margin-left: 5px;
            font-size: small; 
            text-shadow:1px 1px 4px rgb(174, 238, 196);
        }
        #top-header>div>div{
            margin-left: 40px;
        }

        #top-header>div>img{  
            margin-top: -50px;
            float: right 20%;     
            height: 100px;
            width: 100px;
        }
     
        #div_03{
           float: right;
           border-radius: 10px 0 0 0;
            width: 10%;
            background: #0022b8;
            
            
        }
      
        #filter-Menu{
            overflow-y: scroll;
            align-items: center;
            
            height: 50px;
            width: 100%;
            background-color: rgb(0, 0, 0);
           
        }
        #filter-Menu::-webkit-scrollbar{
            display: none;
           
        }
        #filter-Menu>div{
           
            align-items: center;
            display: flex;
            height: 50px;
            width: 1000px;
            background-color: rgb(0, 0, 0);
           
        }
     
        #filter-Menu>div>p{
           margin-left: 10px;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
            font-size: smaller;
            align-items: center;
            color: rgb(255, 255, 255);
        }
        #filter-Menu>div>select{
            font-size:small;
            align-items: center;
           background-color: black;
            color: rgb(250, 247, 87);
            border: none;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
          
        }
        #search-btn{
            margin-left: 20px;
        }

        #card{
            width: 200px;
            height: 250px;
           border-radius: 10%;
            margin: 10px;
            margin-left: auto;
            margin-right: auto;
                       }
        
        #card>img{
            
            width: 150px;
            height: 150px;
            border-radius: 10%;
            transition: 0.5s;
           
                    }
        #card>img:hover{
           cursor: progress;
            width: 170px;
            height: 170px;
            border-style: solid;
            border-color: coral;
           
                }
        #h4-id{
            margin-left: 10px;
            margin-top: -1px;
            margin-bottom: -15px;
            font-style: italic;
            color: green;
        }
        #p_id{
            margin-left: 10px;
            margin-bottom: -15px;
        }
      
    }

  }
  @media (min-width: 400px) and (max-width: 500px) {

    body {
        #card-container::-webkit-scrollbar{
            display: none;
                }
                #card-container{
            margin-top: 10px;
            overflow-x: scroll;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
             width: 400px;
             height: 550px;
            display: grid;
            grid-template-columns: auto auto;
            background-color: rgba(255, 229, 115, 0.678);
            border-radius: 20px 20px 20px 20px;
            
           
          
        }
        #top-header{
            margin-top: 50px;
            display: flex;
        }
        #div_01{
           padding-top: 20px;
            height: 30px;
            width: 100%;
            background: #0022b8;
            border-radius: 20px 10px 0 0;
          
        }
        #div_01>div{
           
            height: 30px;
            width: 100%;
            
            border-radius: 50px 10px 0 0;
          
        }

        #div_02{
           
            padding-top: 20px;
            height: 30px;
            width: 148px;

        }
  
        #top-header>div>div>a{       
            text-decoration: none;
            color: aliceblue;
            margin-left: 5px;
            font-size: small; 
            text-shadow:1px 1px 4px rgb(174, 238, 196);
        }
        #top-header>div>div{
            margin-left: 40px;
        }

        #top-header>div>img{  
            margin-top: -50px;
            float: right 20%;     
            height: 100px;
            width: 100px;
        }
     
        #div_03{
           float: right;
           border-radius: 10px 0 0 0;
            width: 10%;
            background: #0022b8;
            
            
        }
      
        #filter-Menu{
            overflow-y: scroll;
            align-items: center;
            
            height: 50px;
            width: 100%;
            background-color: rgb(0, 0, 0);
           
        }
        #filter-Menu::-webkit-scrollbar{
            display: none;
           
        }
        #filter-Menu>div{
           
            align-items: center;
            display: flex;
            height: 50px;
            width: 1000px;
            background-color: rgb(0, 0, 0);
           
        }
     
        #filter-Menu>div>p{
           margin-left: 10px;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
            font-size: smaller;
            align-items: center;
            color: rgb(255, 255, 255);
        }
        #filter-Menu>div>select{
            font-size:small;
            align-items: center;
           background-color: black;
            color: rgb(250, 247, 87);
            border: none;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
          
        }
        #search-btn{
            margin-left: 20px;
        }

        #card{
            width: 180px;
            height: 250px;
           border-radius: 10%;
            margin: 10px;
            margin-left: auto;
            margin-right: auto;
                       }
        
        #card>img{
            
            width: 150px;
            height: 150px;
            border-radius: 10%;
            transition: 0.5s;
           
                    }
        #card>img:hover{
           cursor: progress;
            width: 170px;
            height: 170px;
            border-style: solid;
            border-color: coral;
           
                }
        #h4-id{
            margin-left: 10px;
            margin-top: -1px;
            margin-bottom: -15px;
            font-style: italic;
            color: green;
        }
        #p_id{
            margin-left: 10px;
            margin-bottom: -15px;
        }
      
    }

  }


  @media (min-width: 300px) and (max-width: 400px) {

    body {
        #card-container::-webkit-scrollbar{
            display: none;
                }
                #card-container{
            margin-top: 10px;
            overflow-x: scroll;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
             width: 300px;
             height: 550px;
            display: grid;
            grid-template-columns: auto ;
            background-color: rgba(255, 229, 115, 0.678);
            border-radius: 20px 20px 20px 20px;
            
           
          
        }
        #top-header{
            margin-top: 50px;
            display: flex;
        }
        #div_01{
           padding-top: 20px;
            height: 30px;
            width: 100%;
            background: #0022b8;
            border-radius: 20px 10px 0 0;
          
        }
        #div_01>div{
           
            height: 30px;
            width: 100%;
            
            border-radius: 50px 10px 0 0;
          
        }

        #div_02{
           
            padding-top: 20px;
            height: 30px;
            width: 148px;

        }
  
        #top-header>div>div>a{       
            text-decoration: none;
            color: aliceblue;
            margin-left: 5px;
            font-size: small; 
            text-shadow:1px 1px 4px rgb(174, 238, 196);
        }
        #top-header>div>div{
            margin-left: 40px;
        }

        #top-header>div>img{  
            margin-top: -50px;
            float: right 20%;     
            height: 100px;
            width: 100px;
        }
     
        #div_03{
           float: right;
           border-radius: 10px 0 0 0;
            width: 10%;
            background: #0022b8;
            
            
        }
      
        #filter-Menu{
            overflow-y: scroll;
            align-items: center;
            
            height: 50px;
            width: 100%;
            background-color: rgb(0, 0, 0);
           
        }
        #filter-Menu::-webkit-scrollbar{
            display: none;
           
        }
        #filter-Menu>div{
           
            align-items: center;
            display: flex;
            height: 50px;
            width: 1000px;
            background-color: rgb(0, 0, 0);
           
        }
     
        #filter-Menu>div>p{
           margin-left: 10px;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
            font-size: smaller;
            align-items: center;
            color: rgb(255, 255, 255);
        }
        #filter-Menu>div>select{
            font-size:small;
            align-items: center;
           background-color: black;
            color: rgb(250, 247, 87);
            border: none;
            text-shadow:2px 2px 4px rgb(174, 238, 196);
          
        }
        #search-btn{
            margin-left: 20px;
        }

        #card{
            width: 180px;
            height: 250px;
           border-radius: 10%;
            margin: 10px;
            margin-left: auto;
            margin-right: auto;
                       }
        
        #card>img{
            
            width: 200px;
            height: 200px;
            border-radius: 10%;
            transition: 0.5s;
           
                    }
        #card>img:hover{
           cursor: progress;
            width: 210px;
            height: 210px;
            border-style: solid;
            border-color: coral;
           
                }
        #h4-id{
            margin-left: 10px;
            margin-top: -1px;
            margin-bottom: -15px;
            font-style: italic;
            color: green;
        }
        #p_id{
            margin-left: 10px;
            margin-bottom: -15px;
        }
      
    }

  }