* 


{    box-sizing: border-box;
        padding: 0;
        margin: 0;
}
/* make it tablet ready */
body {
    background-color: #40be7980;
    flex: 1 0 100%;
   transition: flex-basis 500ms linear;
    margin-bottom: 1.5rem;
} 

.header{
    width: 100%;
}

.header h1  {
    padding: 20px ;
    
    display: flex;
    contain:content;
    background-color: black;
    flex-wrap: wrap ;
    /* block-size: 40; */
    color:  #1D7595;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 35px;
}


 /* .header  a {
    padding:  1px 2px;
    width: 100;
    flex : wrap;
    position:relative;
    right: -900px;
    
    
 } */



.images {
    max-width: 100%
    }

#me{
    padding:  15px 25px;
    margin-right: 0px;
    text-align: justify;
    
    width: 100%;
    
    position:relative;
    
    background-color: brown;
    /* text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; ; */
    box-shadow:  10px 10px 10px 10px black;
    
}


#linkedin:hover,#linkedin:hover #linkedin{
    box-shadow: 0px 0px 15px rgb(8, 7, 14), 5px 5px 2px rgb(241, 139, 5);
}
#linkedin {
    transform: rotate(-10deg);
    margin-block-start: 230px;
    padding: 15px 20px ;
    width:100%;
    text-align: justify;
    position:left;
    background-color: brown;
    text-shadow: 10px 10px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue; 
    
    box-shadow:  20px 15px 15px rgb(8, 7, 14), 15px 20px 20px rgb(241, 139, 5)
}
/* github css */
#github{
    background-color: rgb(8, 8, 8);
    text-emphasis-color: white;
    color: white;
    max-width: 35%;
    /* position: absolute; border-top: 10px; */
    text-align: center;
    justify-content: center;
    border-radius: 20px;}

#email:hover {


    transform: rotate(-20deg);
    
    flex:  1 3 200px;
    
    margin-left: -30px;
    margin-bottom: 20px;
    margin-right: 0px;
    padding: 15px 20px ;
    width: 30%;
    text-align: justify;
    position:relative;
    background-color: rgb(36, 177, 71);
    box-shadow:  inset 0px 0px 8px black, 0 0 15px black;
}



    .footer  {
    display: flex;
    position: sticky;
    justify-content: center; 
    
    /* background-color: rgb(105, 104, 97); */
    font-size: 20px;
    color: rgb(10, 107, 29);
}


.box {
    display: flex;
  }

  .one {
    flex: 1 1 auto;
  }

  .two  {
    flex: 1 1 auto;
  }

  .three {
    flex: 1 1 auto;
   
  }

 
  
 
       /* @media screen and (min-width:768px) {
        .body{
            flex: 0 0 50%;
            max-width: 50%;
        }
         body:last-child {
             flex-grow: 1;
         }
    } 
        
    @media screen and (min-width: 992px) {
       .header a{
           right:  -900px;
          
       }  */
       
   }