pet.css

.pro{

color:yellow;

}


.ahtsham { 
    color: red;
}


   


head{
margin: 0;
font-family: sans-serif;
}

   
.bilal-img{
    border-radius: 500px;
}

.silver-background{
    
    background-color: blueviolet;
}

.bilal{
    background-color: silver;
    border-radius: 10px;
}
    
#GRASS {
    background-color: blue;
    padding: 20px;
    margin: -10px;
}
  

   .milki{


    width: 80%;
    padding: 1%;






   }

   .milki-img{
    height: 150px;

    width: 150px;
    
    margin-left: 30%;
    
    float: left;
    
  
   }

     body{
        border: 2px solid;
     }










    #box1{
        border: 5px solid;
        width: 250px;
        height: 250px;
        font-size: 22px;
        background-color: greenyellow;
        
    }

    #box2{
        margin-right: auto;
        border: 5px solid;
        width: 250px;
        height: 250px;
        font-size: 22px;
        background-color: blue;
    }
    

    {
        margin:0px
        padding:0px
    }

    .background{
        height: 100vh;
        background-image: url("dog\ pic.jpg" );
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        filter: blur(10px);


        .milki{


            width: 80%;
            padding: 1%;
        
        
        
        
        
        
           }
        
           .mobile{
            height: 150px;
        
            width: 150px;
            
            margin-left: 30%;
            
            float: left;
            
          
           }
        
             
           
          body{ 
            margin: 0;
            font-family: sans-serif;
            background-color: #dddddd;
          }

          .{
            .box-sizing:border-box; 
        }
          
        .{
            margin:0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'open sans',sans-serif;
        }
        
         Body{ 
            height: 100vh;
             background-image: url(wallpaper.jpg); 
             background-size: cover;
             background-position: center;  
        }
         li{
            list-style: none;
         }
         a{
            text-decoration: none;
            color: #fff;
            font-size: 1rem;
         }
         a:hover{ 
            color: orange;
         }
         /* header*/
         header{ 
            position: relative;
            padding: 0 2rem;
         }
         .navbar{
            width: 100%;
            height: 60px;
            max-width: 1200px;
            margin: o auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
         }
         .navbar .logo a {
            font-size: 1.5rem;
            font-weight: bold;
         }
          .navbar .links {
            display: flex;
            gap: 2rem;
          }
          .navbar .toggle_btn {
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            display: none;
          }
            .action_btn{
                background-color: orange;
                color: #fff;
                padding: 0.5rem 1rem;
                border: none;
                outline: none;
                border-radius: 20px;
                font-size: 0.8rem;
                font-weight: bold;
                cursor: pointer;
            }
            .action_btn :hover {
                scale: 1.05;
                color: #fff;
            }
              .action_btn:active {
                scale: 0.95;
              }
              /*DROPDOWN_MENU*/
              .dropdown_menu{
                position: absolute;
                right: 2rem;
                top: 60px;
                width: 300px;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(15px);
                border-radius: 10px;
                overflow: hidden;
              } 
              .dropdown_menu li{
                padding: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: center;
              }
        
              /* RESPONSIVE DESIGN*/
              @media (max-width:992px){bar
                  .navbar .links,
                  .navbar .action_btn {
                    display: none;
                  }
                  .navbar .toggle_btn {
                    display:block ;
                  }
              }