@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
#myskill{
 
    text-align: center;
    
    
}
body {
    font-family: 'Raleway', sans-serif;
    position: relative;
}
#TEST{
margin-left: 600px;

}
.txt-type > .txt {
    border-right: 0.2rem solid #777;
  }
  #profile{
    border-style: solid;
   border-radius: 45px;
    
    margin-right: 300px;
    margin-left: 300px;
    
    
    border-color: white;
    margin-top: 20px;
    
   
   
   
}
#table{
    
    font-family: 'Raleway', sans-serif;
    margin-right: 10px;
    margin-top: 35px;
    font-size: 1.6rem;
 
}
#icons{
    
    font-family: "Font Awesome 5 Free";
 
}
.fit-image{
    height: 100%;
    width: 100%;
}


#my-grid{
    margin-top: 50px;
    
}
.grid-padding{
    padding: 0 8px;
}
.grid-padding img{
    margin-bottom: 15px;
    transition: 0.8s ease;
    
}
.grid-padding img :hover{
    box-shadow: 0 10px 40px 0 rgba(0,0,0,0.5);
    transition: 0.8s ease;
    
}
#gallery-col{
    padding-right: 30px;

}

@media screen and (max-width: 640px) {
  
    #profile {
     
     width: 100% !important;
     height: 100% !important;
     margin-right: 3px !important;
     margin-left: 2px !important;
    }
     
    #carddeck{
        width: 100%;
        height: 100% ;
    }
    #proj1,#proj2,#proj3,#proj4{
        width: 100% !important;
        height: 100% !important;

    }
    #hard,#soft{
        width: 100% !important;
        height: 100% !important;
        
    }
    #testimon1{
        width: 50% !important;
        height: 50% !important;
        margin-left: 5px !important;
    }
    #testimon2{
        width: 50% !important;
        height: 50% !important;
       
    }
    #testimon3{
        width: 50% !important;
        height: 50% !important;
    }
    .imgprofile{
        
        max-width: 100%;
        height: auto;
    }
    #experience{
      
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex:300px;
    }
    #carddeck1{
        width: 100%;
        height: 100% ;
    }
   }

    
   @media screen and (min-width:414px)and (max-width:640px) {
   
    #profile {
     
        width: 100% !important;
        height: 100% !important;
        margin-right: 3px !important;
        margin-left: 2px !important;
       }
       
       #testimon1{
        width: 50% !important;
        height: 50% !important;
       
        margin-left: 2px !important;
        margin-right: 4px !important;
       }
       #testimon2{
        width: 50% !important;
        height: 50% !important; 
        margin-left: 4px !important;
        margin-right: 6px !important;
      
       
    }
    #testimon3{
        width: 100% !important;
        height: 100% !important; 
      
    }
        
       #carddeck{
           width: 100%;
           height: 100% ;
       }
       #proj1,#proj2,#proj3,#proj4{
           width: 100% !important;
           height: 100% !important;
   
       }
       #hard,#soft{
           width: 100% !important;
           height: 100% !important;
           
       }

       .imgprofile{
        max-width: 100%;
        height: auto;

    }
    #experience{
        
        display: flex;
        flex-wrap: wrap;
        flex:300px;
    }
    #carddeck1{
        width: 100%;
        height: 100% ;
    }
}

  
     
 @media screen and (min-width:641px)and (max-width:768px) {

    #profile{
     
        width: 50% !important;
        height: 100% !important;
        margin-right: 3px ;
        margin-left: 2px;
       }
       .imgprofile{
        max-width: 100%;
        height: auto;
       }
       #experience{
        
        display: flex;
        flex-wrap: wrap;
        flex:300px;
    }
        
       #carddeck{
           width: 100%;
           height: 100% ;
       }
       #proj1,#proj2,#proj3,#proj4,#hard,#soft{
        width: 100% !important;
        height: 100% !important;

    }
    #testimon1{
        width: 50% !important;
        height: 50% !important;
        
        margin-left: 2px !important;
        margin-right: 4px !important;
       }
    #testimon2{
        width: 50% !important;
        height: 50% !important; 
        margin-left: 4px !important;
        margin-right: 6px !important;
      
    }
    #testimon3{
        width: 50% !important;
        height: 50% !important; 
      
      
    }
    #hard,#soft{
        width: 100% !important;
        height: 100% !important;
        
    }

    #carddeck1{
        width: 100%;
        height: 100% ;
    }
 }
 @media screen and (min-width:320px)and (max-width:480px){




    #profile{
     
        width: 50% !important;
        height: 100% !important;
        margin-right: 3px ;
        margin-left: 2px;
       }
       .imgprofile{
        max-width: 100%;
        height: auto;
       }
       #experience{
        
        display: flex;
        flex-wrap: wrap;
        flex:300px;
    }
        
       #carddeck{
           width: 100%;
           height: 100% ;
       }
       #proj1,#proj2,#proj3,#proj4,#hard,#soft{
        width: 100% !important;
        height: 100% !important;

    }
    #testimon1{
        width: 100% !important;
        height: 100% !important;
        
        
       
       }
    #testimon2{
        width: 100% !important;
    
        margin-top:10px;
      
    }
    #testimon3{
        width: 100% !important;
        height: 100% !important; 
      
      
    }
    #hard,#soft{
        width: 100% !important;
        height: 100% !important;
        
    }



    #carddeck1{
        width: 100%;
        height: 100% ;
    }


 }