.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


        body{
            font-family: sans-serif;
            background-color: rgb(11, 74, 163);

            
        }
        #nav-menu{
            /* border: 1px solid red; */
            display: flex;
            justify-content: center;
            background-color: rgb(11, 74, 163);
            color: white;
            position: sticky;
            top: 0;
            z-index: 2;
           box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;           
           border-radius: 5px;
        }
        #nav-menu>div{
            width: 95%;
           /* border: 1px solid green; */
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0px 20px;
           border-radius: 5px;
           margin: 0px 30px;

        }
        #navName{
            /* border: 1px solid orange; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 0;
        }
        #navLink{
            width: 60%;
            display: flex;
            justify-content: space-around;
        }
        #navLink>h3>a{
            color: white;
            text-decoration: none;
        }

        #about{
            display: flex;
            justify-content: center;
            
        }
        #about>div{
            width: 95%;
            display: flex;
            justify-content: space-between;
            margin: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            background-color: rgb(81, 143, 232);
            color: white;
            border: 1px solid white;
            


        }
        #profileText{
            width: 60%;
            font-size: 17px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0px 30px;
            background-color: white;
            color: black;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
            border-radius: 5px;


        }
        #profileText>div:last-child{
            width: 15%;
        }
        #profileText button{
            display: block;
            width: 100%;
            padding: 15px 25px;
            font-weight: bold;
            background-color: rgb(81, 143, 232);;
            border-radius: 5px;
            color: white;
            border: 1px solid transparent;
            cursor: pointer;


        }
        #profileImage{
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 0px;
            border-radius: 5px;
        }
        #profileImage>div{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #profileImage>div>a>img{
            width: 200px;
            box-sizing: border-box;
            display: flex;
            
        }

        #tech{
            display: flex;
            justify-content: center;
        }
        #tech>div{
            width: 95%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            margin: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 5px;


        }
        #techTitle{
            width: 20%;
            display: flex;
            justify-content: center;
            background-color: rgb(81, 143, 232);
            color: white;
            border-radius: 5px;
            margin-bottom: 20px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        }
        #techImages{
            width: 80%;
            /* border: 1px solid green; */
            display: grid;
            grid-template-columns: repeat(3,15%);
            grid-template-rows: auto;
            gap: 30px 150px;
            justify-content: center;
            align-items: center;
            padding: 30px 20px;
            background-color: rgb(81, 143, 232);
            border-radius: 5px;
            margin-bottom: 70px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;            
        }
        #techImages>div{
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            height: 100px;
            background-color: white;
            padding:10px ;
            border-radius: 10px;
           
        }
        #techImages>div>div>img{
            width: 80px;
        }
        #techImages>div>div:nth-child(2)>h3{
            padding: 0px;
            margin: 0px;
        }

        #statitics{
            display: flex;
            justify-content: center;
        }
        #github{
           display: flex;
           justify-content: center;
            
        }
        #github>div{
            width: 95%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
            border-radius: 5px;
            margin: 30px;
            padding: 20px;
        }
        #githubTitle{
            width: 10%;
            display: flex;
            justify-content: center;
            padding: 0px 30px;
            border-radius: 5px;
            box-shadow: rgba(0, 128, 255, 0.3) 0px 0px 0px 3px;
            margin-bottom: 20px;
            background-color: white;

        }
        #githubCalender{
            width: 80%;
            padding: 20px;
            /* box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px; */
            box-shadow: rgba(0, 128, 255, 0.3) 0px 0px 0px 3px;
            background-color: white;



        }
        
        #githubStats{
            width: 80%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            /* box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px; */
            box-shadow: rgba(0, 128, 255, 0.3) 0px 0px 0px 3px;
            background-color: white;
        }
        
        #githubStats>img{

        }
        #projects{
            display: flex;
            justify-content: center;
        }
        #projects>div{
            width: 95%;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-columns: auto;
            gap: 30px;
            margin: 30px;
            padding: 20px 0px;
            border-radius: 5px;
            /* border-top: 1px solid white; */
            /* border-bottom: 1px solid white; */



        }
        #projectProject>h1{
            width: 10%;
            margin: auto;
            color: white;
        }
        #projectDetails{
            display: flex;
            justify-content: space-between;
            padding: 30px 20px;
            background-color: white;
            border-radius: 5px;

        }
        #projectImage{
            width: 42%;
            display: flex;
            align-items: center;
        }
        #projectImage>div{
            width: 100%;
        }
        #projectImage>div>a>img{
            width:540px;
            height: 300px;
            box-sizing: border-box;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        }
        #projectContainer{
            width: 50%;
            /* border: 1px solid green; */
            padding: 20px 30px;
            background-color: rgb(81, 143, 232);
            box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
            color: white;
            border-radius: 5px;
        }
        #projectTitle{
            padding:0px;
        }
        #projectTitle>h2{
            margin: 0px;
        }
        .projectButton{
            width: 40%;
            display: flex;
            justify-content: space-between;
        }
        .projectButton>a>button{
            border: 5px solid red;
            width: 100%;
            padding: 15px 25px;
            font-weight: bold;
            /* background-color: ;; */
            border-radius: 5px;
            color: black;
            border: 1px solid transparent;
            cursor: pointer;
        }

        #skills{
            display: flex;
            justify-content: center;
        }
        #skills>div{
            width: 95%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 20px;
            margin: 30px;
            border-radius: 5px;

        }
        #skillTitle{
            width: 10%;
            display: flex;
            justify-content: center;
            padding: 0px 30px;
            background-color: rgb(81, 143, 232);
            color: white;
            border-radius: 5px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        }
        #skillDetails{
            width: 60%;
            display: flex;
            justify-content: flex-start;
            background-color: rgb(81, 143, 232);
            color: white;
            border-radius: 5px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }
        #skillDetails>ul{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 10px 15px;
            font-size: 17px;
            font-weight: bold;
        }
        
       

        #contact{
            display: flex;
            justify-content: center;
        }
        #contact>div{
            width: 95%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
           box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            background-color: rgb(81, 143, 232);

            color: white;


        }
        #contactTitle{
            width: 10%;
            display: flex;
            justify-content: center;
            color: white;

        }
        #contactDetails{
            width: 80%;
            display: flex;
            justify-content: space-evenly;

        }
        #contactDetails>a{
            color: white;
            text-decoration: none;
        }
        span{
            font-weight: lighter;
        }