@media all and (min-width: 0px) and (max-width: 599px){
    hr{
        border: 0.2px solid rgb(218, 203, 203) ;
    }
    #navbar{
        padding-right: 0;
    }
    #name_image{ 
        width: 70%;  
    }
    #name_image > div{    
        width: 20%;
    }  
    #name_image>p{
        font-size: 14px;
    }  
    #tabs>div{
        display: none;
    }
    #tabs>div:last-child{
        display: flex;        
        cursor: pointer;
        position: relative;  
        justify-content: flex-end;     
        /* padding-right: 10px; */
        /* border: 1px solid ; */
        width: 100%;   
        z-index: 1;       
    }
    #tabs>div:last-child>i{
        margin-right: 10px; 
        font-weight: 00;       
    } 
    #cross{
        display: none;
    }   
    #content{
        position: absolute; 
        position: fixed;
        z-index: 1;         
        display: none; 
        width: 100%;        
        flex-direction: column;
        text-align: right;         
        font-size: 12px;
        font-weight: 600;
        gap: 20px;
        background-color: rgb(228, 213, 213);
        right: 0;
        box-shadow: #abca6c ;             
    }
    #content>a{
        text-decoration: none;
        color: black;
        padding: 10px;
    }
    #content a:hover{
        color: #abca6c;        
    } 
    #brief{
        width: 100%;        
    }  
    #landscape{          
        display: none;
    }  
    #portrait{
        display: block;
        width: 100%;
        height: 85vh;  
        opacity: 0.4; 
    }  
    #name_tag{    
        width: 90%;   
        font-size: 30px;
        font-weight:900;  
        line-height: 50px;      
    }
    #brief>div>{
        gap: 20px;
    }
    #brief>div:first-child>div:nth-child(3){
        width: 90%;
    }
    #brief_detail{
        font-size: 15px;   
        /* letter-spacing: px;   */
        /* line-height: normal;  */
    }
    #resume_redirect{        
        font-size: 17px;  
        width:fit-content ;
        padding: 10px 40px;      
    }    
    #brief>div>img{
        width: 30%;
    }   
    #contact_details,
    #contact_details>div{
        display: none;   
        opacity: 0;
    } 
    .section{
        
    }   
    #about_me{
        background-color: 
        #fbfbfc;
        padding-top: 60px;
    }
    .tags{
        font-size: 20px;
        margin: auto;
    }    
    .about_the_section{       
        font-size: 14px;
        margin-bottom: 30px;
        width: 80%;
    }   
    #description_skills{
        grid-template-columns: repeat(1, 1fr);
    } 
    #description_skills>div:first-child>p:first-child,
    #description_skills>div:nth-child(2)>p:first-child{
        font-size: 14px;  
        text-align: center;  
    }
    #description_skills>div:first-child>p:nth-child(2),
    #description_skills>div:first-child>p:nth-child(3),
    #skills>div{
        font-size: 13px;
    }
    #tech{
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 0px ;
        margin: auto;
        /* border: 1px solid; */
    }   
    #tech>div>p{
        font-size: 12px;
    }
    #tech>div>img{
        width:80%;           
    } 
    .git-stats{
        flex-direction: column;
        gap: 10px;
    }       
   
    #stats{
        width: 90%;       
        gap: 10px ;        
    }
    #stats>div{
        width: 150px;
        height: 100px;      
        text-align: center;       
        gap:5px;
        padding: 2px;
    }
    #stats>div>p:first-child{
        font-size: 15px;        
    }
    #stats>div>p:nth-child(2){
        font-size: 12px;    
    }
    .main{       
        display: flex;
        flex-direction: column;        
        margin: 30px;
    } 
    #projects_div{
        width: 100%;
    }
    .picture{
        width: 100%;
        margin: auto;
    }     
    .project_description>div:first-child{
        text-align: center;  
        font-size: 14px;   
        width: 100%;   
    }
    .project_description>div:nth-child(2){        
        align-items: center;  
        text-align: center;  
        font-size: 13px;    
    }
    .project_description>div:nth-child(3){
        width: 30%;        
        margin: auto;
        justify-content: space-evenly;           
    }
    .project_description>div:nth-child(3)>button{        
        font-size: 14px;     
        padding: 10px 30px;  
        font-weight: 500; 
    }     
    #block{
        display: none;
    } 
    #block1{
        width: 100%;
        display: flex;  
        justify-content: center;
        align-items: center;
        gap: 20px;
        background-color: black;
        padding: 30px;
     }
    #block1>div{    
        display: flex;    
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
       
    }
    
    #block1>div>a{
        color: black;
    }
    
    #block1>div>a>div{
        background-color: rgb(223, 209, 209);
        margin:auto;
        /* width: 100%; */
        padding: 8px;
        border-radius: 5px;
        cursor: pointer;
    } 
    #footerInfo>p{        
        font-size: 12px;        
    }   
    #footerInfo>div>p{
        font-size: 8px;
    }
   
}