* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
    background-color:#1b1b1b;
    color: #8dd64e;
    /* text-align: center; */
    /* background-image: url("https://repository-images.githubusercontent.com/214671270/23f88b80-ed18-11e9-8a21-0a636b193f08"); */
}
html {  
    scroll-behavior: smooth;  
}
#navbar {
    width: 100%;
    display: flex;
    height: 12%;
    align-items: center;
    top: 0%;
   
    /* background-color: #042738; */
    justify-content: right;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    position: fixed;
    z-index: 2;
    border-bottom:2px solid #8dd64e;
    background-color:#1b1b1b;
}
#navbar>h2{
    margin-right: 40%;
    color: teal;
}


#innspan {
    display: flex;
    /* border: 1px solid red; */
    height: 60%;
    align-items: center;
    /* background-color: #042738; */
    /* gap: 10%; */
    width: 35%;
    margin-right: 8%;
    justify-content: space-evenly;
}

#innspan>a {
    font-size: 110%;
    text-decoration: none;
    color: whitesmoke;
    background-color: #1b1b1b;
}

/* --------------------------------home and me----------------------------------- */

#nameandintro {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8dd64e;
    background-size: 100%;
    margin-bottom: -3%;
    
}

#nameandintro>div>img {
    height: 300px;
    width: 320px;
    /* border-radius: 10%; */
    /* margin: 5% 5% 5% 5%; */
}
#myprofile{
border-radius: 50%;
border: 6px solid teal;
}
#nameandintro>#id1 {
    width: 30%;
    height: auto;
    text-align: left;
    margin-left: 8%;
    /* background: transparent; */
}

#nameandintro>div>button{
    width: 30%;
    height: 35px;
    font-size: 95%;
    border-radius: 5px;
    border: 2px solid whitesmoke;
    /* background: transparent; */
}
#nameandintro>div>button>a{
    text-decoration: none;
    color: whitesmoke;
    box-sizing: border-box;
    /* background: transparent; */
}
.sec1 {
    margin-top: 10%;
    /* background: transparent; */
}
#maindiv{
    border-top: 2px solid whitesmoke;
}
/*------------ text animation ------------ */

.typewriter h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }

/*------------ text animation ends ------------ */
/* --------------------------------home and me ends----------------------------------- */

/*------------------------------------------project page starts here----------------------------------------*/


#ph1{
    margin-top: 5%;
    color: whitesmoke;
    /* border-bottom: 2px solid grey; */
    display: flex;
    justify-content: center;
    /* padding-bottom: 1.5%; */
}
#p1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 7%;
    /* border: 1px solid yellow; */
    margin: 5% 12% 0px 12%;
    border-bottom: 3px solid grey;
    padding-bottom: 3%;
}

#p1>.p1img{
    height: 300px;
    width: 50%;
    /* border: 1px solid yellow; */
}
#p1>.p1img>img{
    height: 100%;
    width: 100%;
    border-radius: 8px;
}
#p1>.p1all{
    width: 50%;
    /* border: 3px solid grey; */
}
#p1>.p1all>.project_desc{
    width: 70%;
    margin: 2% 0px 2% 0px;
}
#p1>.p1all>.techstack{
    width: 80%;
    height: 100px;
    /* border: 5px solid grey; */
    margin-bottom: 2%;
    display: flex;
    justify-content: left;
    gap: 5%;
    align-items: center;
}
#p1>.p1all>.button_git{
    height: 40px;
    width: 100px;
    /* border: 2px solid grey; */
    border-radius: 5px;
    margin-right: 5%;
    border: 3px solid grey;
}
#p1>.p1all>.button_deploy{
    height: 40px;
    width: 100px;
    /* border: 2px solid grey; */
    border-radius: 5px;
    border: 3px solid grey;
}
#p1>.p1all>.techstack>img{
    height: 50%;
    width: 10%;
}

/*------------------------------------------project page ends here----------------------------------------*/

/*------------------------------------------skill starts here----------------------------------------*/

#skillsmain{
    /* border: 2px solid teal; */
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid teal;
}
#skillsmain>h1{
    margin: 0px 0px 3% 0px;
    color: whitesmoke;
}
#skillsmain>div{
    /* border: 3px solid red; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 7%;
    height: auto;
    width: 75%;
    margin-bottom: 3%;
}
#skillsmain>div>img{

    border-top: 4px solid whitesmoke;
    border-right: 4px solid teal;

    height: 85%;
    width: 25%;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    padding: 3% 3% 0px 0px;
    border-radius: 7px;
}

/*------------------------------------------skill ends here----------------------------------------*/

/*-------------------------------------------git stats start-------------------------------------------*/

.calendar{
    width: 76%;
    margin-bottom: 5%;
}
.github-stats{
    margin: 5% 0px 5% 0px;
    text-align: center;
    font-size: 250%;
}
.github-stats>span{
    font-size: 100%;
}
#optional{
    margin-top: 5%;
}

/*-------------------------------------------git stats end-------------------------------------------*/

/* ----------------------------------------------contact section start--------------------------------------- */

#contact{
    margin-top: 7%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 2px solid;
    border-bottom: 2px solid teal;
    padding-top: 25px;
}
#contactfirst{
    margin-top: 3%;
    width: 33%;
    height: 23%;
   display: flex;
   justify-content: space-evenly;
   gap: 17%;
   display: flex;
   /* border: 1px solid red; */
}
#contactfirst>img{
    width: 50px;
    height: 50px;
}
#contact>h2{
    color: whitesmoke;
}
#contactinner{

display: flex;
justify-content: space-evenly;
align-items: center;

width: 35%;
height: auto;
margin-top: 2%;
margin-bottom: 3%;
}
#contactinner>p{
    font-size: 15px;
    color: whitesmoke;
  
}
#contactinner>img{
    width: 5%;
    height: 30%;
   
}
/* ----------------------------------------------contact section ends--------------------------------------- */

/* -------------------------------------------------statistics starts------------------------------------------- */



/* -------------------------------------------------statistics ends here------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*-------------------------------------------- media for medium------------------------------------- */
@media(max-width:1180px) {

    #navbar {
        width: 100%;
        display: flex;
        height: 100px;
        align-items: center;
        top: 0%;
        justify-content: right;
        position: fixed;
        z-index: 2;
        border-bottom:2px solid #8dd64e;
        background-color:#1b1b1b;
    }
    #navbar>h2{
        color: teal;
        width: 15%;
        margin-right: 13%;
    }
 
    #innspan {
        display: flex;
        height: 70%;
        align-items: center;
        width: 60%;
        margin-right: 5%;
        justify-content: space-evenly;
    }
    
    #innspan>a {
        font-size: 110%;
        text-decoration: none;
        color: whitesmoke;
        background-color: #1b1b1b;
    }

/*-----------------navbar ends-------------------*/

/*------------------home-------------------*/

#nameandintro {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8dd64e;
    margin-top: 12%;
    background-size: 100%;
}

#nameandintro>div>img {
    height: 180px;
    width: 185px;
    border-radius: 50%;
    margin: 5% 5% 5% 5%;
}

#nameandintro>#id1 {
    width: 55%;
    height: auto;
    text-align: left;
    margin-left: 8%;
}
/* ------------------home ends-------------- */

/*------------------------------------------project page starts here----------------------------------------*/
#ph1{
    margin-top: 5%;
    color: whitesmoke;
    display: flex;
    justify-content: center;
}
#p1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 7%;
    margin: 5% 12% 0px 12%;
    border-bottom: 3px solid teal;
    padding-bottom: 3%;
}

#p1>.p1img{
    height: 250px;
    width: 100%;
}

#p1>.p1all{
    width: 100%;
    margin-top: 3%;
    margin-bottom: 3%;
}
/*------------------------------------------project page ends here----------------------------------------*/

/*-------------------------------------------git stats start-------------------------------------------*/

.calendar{
    width: 80%;
    height: auto;
}
.github-stats{
    margin: 5% 0px 5% 0px;
    text-align: center;
    font-size: 250%;
    border-top: 2px solid whitesmoke;
    padding-top: 25px;
}
.github-stats>span{
    font-size: 100%;
}
#optional{
    margin-top: 6%;
}

/*-------------------------------------------git stats end-------------------------------------------*/
/*------------------------------------------skill starts here----------------------------------------*/
#skillsmain{
    /* border: 2px solid teal; */
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid teal;
}
#skillsmain>h1{
    margin: 0px 0px 3% 0px;
    color: whitesmoke;
}
#skillsmain>div{
    /* border: 3px solid red; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 7%;
    height: auto;
    width: 75%;
    margin-bottom: 3%;
}
#skillsmain>div>img{

    border-top: 4px solid whitesmoke;
    border-right: 4px solid teal;
    height: 60px;
    width: 70px;
    margin: auto;
    margin-top: 4%;
    margin-bottom: 2%;
    padding: 3% 3% 0px 0px;
    border-radius: 7px;
}
/* -------------=======================------------------=========================------------- */

#contact{
    border-bottom: 2px solid teal;
}
#contact>#contactfirst{
    width: 33%;
    height: 23%;
   display: flex;
   justify-content: space-evenly;
   gap: 17%;
   display: flex;
   /* border: 1px solid red; */
}
#contactfirst>img{
    width: 35px;
    height: 35px;
}
#contact>h2{
    color: whitesmoke;
}
#contact>#contactinner{
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
width: 60%;
height: auto;
margin-top: 2%;
margin-bottom: 3%;
}
#contact>#contactinner>p{
    font-size: 12px;
    color: whitesmoke;
    margin-bottom: 2%;
}
#contact>#contactinner>img{
    width: 5%;
    height: 30%;
    margin-bottom: 2%;
}
/*------------------------------------------skill ends here----------------------------------------*/

/* -------------------------------------------------statistics starts------------------------------------------- */


}
/* -------------------------------------------------statistics ends here------------------------------------------- */
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

/*-------------------------------- media for small------------------------------------- */
@media(max-width:667px) {

    *{
        margin: 0px;
        padding: 0px;
    }
    #navbar {
        width: 100%;
        display: flex;
        height: 68px;
        align-items: center;
        top: 0%;
        justify-content: right;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        position: fixed;
        z-index: 2;
        border-bottom:2px solid #8dd64e;
        background-color:#1b1b1b;
       
    }
    #navbar>h2{
        color: teal;
        width: 18%;
        /* height: 40%; */
        font-size: 80%;
        margin-left: 4%;
        margin-right: 0px;
    }
 
    #innspan{
        display: flex;
        height: 50%;
        align-items: center;
        width: 85%;
        margin-right: 4%;
        justify-content: space-evenly;
        grid-area: 3%;
        /* border: 1px solid red; */
    }
    
    #innspan>a {
        font-size: 10px;
        text-decoration: none;
        color: whitesmoke;
    }

/*-----------------navbar ends-------------------*/

/*------------------home-------------------*/

#nameandintro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8dd64e;
    margin-top: 12%;
    background-size: 100%;
}

#nameandintro>div>img {
    height: 140px;
    width: 150px;
    border-radius: 50%;
    margin: 5% 5% 5% 5%;
}
.typewriter>h1{
    font-size: 120%;
}
#nameandintro>#id1 {
    width: 75%;
    height: auto;
    text-align: left;
    margin-left: 8%;
    margin-top: 2%;
    /* background: transparent; */
}
#id1>#downloadresume{
    height: 40px;
    width: 100px;
}
/* ------------------home ends-------------- */

/*------------------------------------------project page starts here----------------------------------------*/
#maindiv{
    border-top: 2px solid whitesmoke;
}
#ph1{
    margin-top: 5%;
    color: whitesmoke;
    /* border-bottom: 2px solid grey; */
    display: flex;
    justify-content: center;
    font-size: 130%;
    /* padding-bottom: 1.5%; */
}
#p1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 7%;
    /* border: 1px solid yellow; */
    margin: 5% 12% 0px 12%;
    border-bottom: 3px solid teal;
    padding-bottom: 3%;
}

#p1>.p1img{
    height: 150px;
    width: 100%;
    /* border: 1px solid yellow; */
}
#p1>.p1img>img{
    height: 100%;
    width: 100%;
    border-radius: 8px;
}
#p1>.p1all{
    width: 100%;
    /* border: 3px solid grey; */
}
#p1>.p1all>.project_desc{
    width: 100%;
    margin: 2% 0px 2% 0px;
}
#p1>.p1all>.techstack{
    width: 80%;
    height: 100px;
    /* border: 5px solid grey; */
    margin-bottom: 2%;
    display: flex;
    justify-content: left;
    gap: 5%;
    align-items: center;
}
#p1>.p1all>.button_git{
    height: 40px;
    width: 100px;
    /* border: 2px solid grey; */
    border-radius: 5px;
    margin-right: 5%;
    border: 3px solid grey;
}
#p1>.p1all>.button_deploy{
    height: 40px;
    width: 100px;
    /* border: 2px solid grey; */
    border-radius: 5px;
    border: 3px solid grey;
}
#p1>.p1all>.techstack>img{
    height: 40%;
    width: 20%;
}
.p1all>.project_title{
    font-size: 130%;
}
/*------------------------------------------project page ends here----------------------------------------*/

/*-------------------------------------------git stats start-------------------------------------------*/

.calendar{
    width: 80%;
    height: auto;
}
.github-stats{
    margin: 5% 0px 5% 0px;
    text-align: center;
    font-size: 250%;
    border-top: 2px solid whitesmoke;
    padding-top: 25px;
}
.github-stats>span{
    font-size: 100%;
    color: whitesmoke;
}
.github-stats{
    font-size: 150%;
    color: whitesmoke;
}
#optional{
    margin-top: 6%;
}

/*-------------------------------------------git stats end-------------------------------------------*/

/*------------------------------------------skill starts here----------------------------------------*/
#skillsmain{
    /* border: 2px solid teal; */
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid teal;
}
#skillsmain>h1{
    margin: 0px 0px 5% 0px;
    color: whitesmoke;
    font-size: 20px;
}
#skillsmain>div{
    /* border: 3px solid red; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 7%;
    height: auto;
    width: 75%;
    margin-bottom: 3%;
}
#skillsmain>div>img{

    border-top: 2px solid whitesmoke;
    border-right: 2px solid teal;

    height: 32px;
    width: 32px;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    padding: 3% 3% 0px 0px;
    border-radius: 7px;
}

/*------------------------------------------skill ends here----------------------------------------*/
/* ----------------------------------------------contact section start--------------------------------------- */

#contact{
    border-bottom: 2px solid teal;
}
#contact>#contactfirst{
    margin-top: 3%;
    width: 33%;
    height: 23%;
   display: flex;
   justify-content: space-evenly;
   gap: 17%;
   display: flex;
   /* border: 1px solid red; */
}
#contactfirst>img{
    width: 20px;
    height: 20px;
}
#contact>h2{
    color: whitesmoke;
    font-size: 17px;
}
#contact>#contactinner{
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
width: 60%;
height: auto;
margin-top: 3%;
margin-bottom: 3%;
}
#contact>#contactinner>p{
    font-size: 8px;
    color: whitesmoke;
    margin-bottom: 3%;
}
#contact>#contactinner>img{
    width: 7%;
    height: 30%;
    margin-bottom: 2%;
}

/* ----------------------------------------------contact section ends--------------------------------------- */

/* -------------------------------------------------statistics starts------------------------------------------- */


/* -------------------------------------------------statistics ends here------------------------------------------- */

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++   THE END   +++++++++++++++++++++++++++++++++++++++++++++++++++++ */