*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}


html body{
    width: 100%;
    height: 100%;
     /* background-color: #0f1111; 
    color:#ffeeee; */
    background-color: black;
    /* color: #f5f5f5; */
     color: #c7c7c7;
}


#navbar{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    /* background-color: #0f2a24; */
    overflow: hidden;
    border-bottom: 2px solid rgb(127, 119, 119);
}
#left h1{
    /* color: #ffeeee; */
     color: #f5f5f5;
}
#navbar #left{
    display: flex;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    width: 65%;
    height: 70px;
    font-size: 13px;
}
#navbar #right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1.5rem;
    height: 70px;
    width: 35%;
    font-size: 14px;
    font-weight: 510;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    /* color: #ffeeee; */
      color: #f5f5f5;
}
#right li{
    list-style: none;
}
#front{
    display: flex;
    height: 100vh;
    width: 100%;
}
#front-left{
    height: 100%;
    width: 50%;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: -50px;
    line-height: 3rem;
}
#front-left p{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    line-height: 2rem;
}
#front-left h3{
    /* color: #999966;  */
    color: #e6c79c;
}
#front-left h2{
    font-size: 30px;
    font-weight: 600;
    color: #e6c79c;
}
#front-right{
     margin-top: 80px;
     margin-left: 55px;
}
#front-right #img img{
    height: 400px;
    width: 400px;
    border-radius: 80%;
    background-size: cover;
    cursor: pointer;
}
#navbar li a{
    color: white;
    text-decoration: none;
}
#navbar li a:hover{
    /* color: rgb(213, 193, 112); */
    color: #e6c79c;
    width: auto ;
}
#navbar li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    background-color: white;
    transition: width 0.4s ease;
}
#navbar li a:hover::after{
    width: 100%;
    border-bottom: 3px solid white;
}
#navbar li a.active{
    /* color: rgb(213, 193, 112); */
     color: #e6c79c;
}
#navbar li a.active::after{
    border-bottom: 3px solid white;
    width: 0;
}
#navbar li a.active:hover:after{
    border-bottom: 3px solid white;
    width: 100%;
}
#btn-group{
    display: flex;
    gap: 20px;
    margin-top: 30px;
    font-size: 16px;
    transition: all 0.3s ease;
}
 #btn1{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 50px;
    background-color: transparent;
     border: 3px solid #ffeeee;
    color: #ffeeee;
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
 }
#btn1:hover{
    /* background-color: rgb(213, 193, 112); */
     background-color: #e6c79c;
    color: black;
    border: transparent;
}
#btn2{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: 50px;
    background-color: transparent;
    color: #ffeeee;
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
    /* border: 3px solid #999966; */
     border: 3px solid #e6e6e6;
}
#btn2:hover{
    background-color: white;
    color: black;
    border: transparent;
    
}
/* about section */
#about-right{
     margin-top: 80px;
     margin-left: 55px;
}
#about-right #img img{
    height: 400px;
    width: 400px;
    border-radius: 80%;
    background-size: cover;
}
#about{
    display: flex;
    height: 100vh;
    width: 100%;
}
#about-left{
    height: 100%;
    width: 50%;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: -50px;
    line-height: 3rem;
}
span{
    /* color: rgb(213, 193, 112); */
     color: #e6c79c;
}
#about-left h1{
    margin-bottom: 22px;
    font-style: italic;
    text-decoration: underline 1.5px white;
    font-size: 60px;
    /* color: #999966; */
     color: #e6c79c;
}
#about-left p{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    line-height: 2rem;
}
/* education section */
#edu-journey{
    padding-bottom: 30px;
    padding-top: 60px;
    text-decoration: underline;
}
#edu1{
    box-sizing: border-box;
    width: 80%;
    height: 200px;
    display: inline-flex;
    flex-direction: column;
    /* border-left: 2px solid #999966; */
    border-left: 2px solid #7e500f;
    /* background-color: rgb(36, 35, 35); */
    background-color: #1e1e1e;
}
#edu2{
    box-sizing: border-box;
    width: 90%;
    margin-top: 10px;
    width: 80%;
    height: 200px;
    display: inline-flex;
    flex-direction: column;
    /* border-left: 2px solid rgb(213, 193, 112); */
    border-left: 2px solid #7e500f;
    /* background-color: rgb(36, 35, 35); */
    background-color: #1e1e1e;
}
#edu2:hover{
    margin-right: 27px;
}
#edu1:hover{
    margin-right: 27px;
}
#edu3:hover{
    margin-right: 27px;
}
#edu3{
     box-sizing: border-box;
    width: 90%;
    margin-top: 10px;
    width: 80%;
    height: 200px;
    display: inline-flex;
    flex-direction: column;
    /* border-left: 2px solid rgb(213, 193, 112); */
    border-left: 2px solid #7e500f;
    /* background-color: rgb(36, 35, 35); */
    background-color: #1e1e1e;
}
#front-left h3:hover{
    /* text-shadow:0 0 8px rgba(212,175,55,0.6); */
    text-shadow: 0 0 8px #7e500f;
}
/* skill section */
#skill{
    display: flex;
    height: 100vh;
    width: 100%;
}

#skill h3:hover{
   /* text-shadow: 0 0 8px rgb(213, 193, 112); */
   text-shadow: 0 0 8px #7e500f;
}
#skill span:hover{
   /* text-shadow: 0 0 8px rgba(212,175,55,0.6); */
   text-shadow: 0 0 8px #7e500f;
}

#skill-left{
    height: 70%;
    width: 40%;
    font-size: 30px;
    margin-left: 120px;
    margin-top: 60px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 3rem;
    /* background-color: rgb(54, 53, 53); */
    background-color: #1e1e1e;
    box-sizing: border-box;
     border: 2px solid #7e500f;
}
#skill-right{
     height: 70%;
    width: 40%;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 60px;
    margin-right: -10px;
    padding-right: 30px;
    margin-left: 30px;
    line-height: 3rem;
    /* background-color: rgb(54, 53, 53); */
    background-color: #1e1e1e;
    box-sizing: border-box;
    /* border: 2px solid #999966; */
     border: 2px solid #7e500f;
}
#skill h3{
    margin-bottom: 30px;
    font-size: 50px;
    /* color: #999966; */
     color: #e6c79c;
}
#skill span{
    color: #ffeeee;
    white-space: nowrap;
    font-size: 25px;
}
#tech-skill{
    display: flex;
    align-items: center;
    width: 60px;
    gap: 10px;
    padding-right: 110px;
}
#tech-skill i{
    font-size: 30px;
    width: 30px;
    text-align: center;
}
/* #skill span:hover{
    font-size: 28px;
} */
#skill-left .fa-brands{
    font-size: 30px;
}
/* .fa-brands {
 background-color: #c9bfbf;
} */
 #tech-skill .fa-html5{
    color: #e34c26;
    font-size: 28px;
}
#tech-skill .fa-css3-alt{
color: #264de4;
 font-size: 28px;
}
#tech-skill i:hover{
    transform: rotate(30deg);
}
#tech-skill .fa-js{
    color: #f7df1e;
     font-size: 28px;
}
#tech-skill .fa-react{
    color: #61dafb;
     font-size: 28px;
}
#tech-skill .fa-java{
    color: #5382a1;
     font-size: 28px;
}
#tech-skill .fa-python{
    color: #ffd43b;
     font-size: 28px;
}

#tech-skill .fa-comments{
    color: #4facfe;
    font-size: 28px;
}
#tech-skill .fa-people-group{
color: #43e97b;
 font-size: 28px;
}
#tech-skill .fa-lightbulb{
    color: #f6c453;
     font-size: 28px;
}
#tech-skill .fa-clock{
    color: #ff9f43;
     font-size: 28px;
}
#tech-skill .fa-palette{
    color: #ff6f61;
     font-size: 28px;
}
#tech-skill .fa-person-chalkboard{
    color: #ff9ff3;
     font-size: 28px;
}
/* project section */
#project{
    display: flex;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
}
#project h2{
    text-align: center;
    margin-top: -80px;
    margin-bottom: 30px;
    font-size: 100px;
    text-decoration: underline 2px ;
    
}
#project h3{
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* color: #999966; */
     color: #e6c79c;
}
#project p{
    font-size: 25px;
}
#project #container{
    display: flex;
    justify-content: center;
    gap: 40px;
}
#pro1{
    box-sizing: border-box;
    width: 80%;
    height: 200px;
    display: inline-flex;
    flex-direction: column;
    /* border-left: 2px solid rgb(213, 193, 112); */
     border-left: 2px solid #e6c79c;
    /* background-color: rgb(36, 35, 35); */
    background-color: #1e1e1e;
}
#pro2{
    box-sizing: border-box;
    width: 90%;
    margin-top: 10px;
    width: 80%;
    height: 210px;
    display: inline-flex;
    flex-direction: column;
    /* border-left: 2px solid rgb(213, 193, 112); */
     border-left: 2px solid #e6c79c;
    /* background-color: rgb(36, 35, 35); */
      background-color: #1e1e1e;
}

#project .fa-brands{
    font-size: 30px;
}
#project i{
    font-size: 30px;
    width: 30px;
    text-align: center;
}
.fa-folder-open{
    color: #b38027;
    font-size: 22px;
    margin-right: 10px;
}
#tech{
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    width: 60px;
    gap: 6px;
    font-size: 40px;
    padding-right: 110px;
    padding-right: 120px;
    margin-left: 45%;
    margin-top: 20px;

}
.project-skill i{
    font-size: 80px;
    width: 30px;
    text-align: center;
}
/* #skill span:hover{
    font-size: 28px;
} */
.project .fa-brands{
    font-size: 40px;
    margin-bottom: 10px;
}
/* .fa-brands {
 background-color: #c9bfbf;
} */
.project-skill .fa-html5{
    color: #e34c26;
    font-size: 28px;
    /* text-shadow: 0 0 10px currentcolor; */
}
.project-skill .fa-css3-alt{
color: #264de4;
 font-size: 28px;
}
.project-skill i:hover{
    transform: rotate(30deg);
}
.project-skill .fa-js{
    color: #f7df1e;
     font-size: 28px;
}
#project a{
    color: white;
}
#project a .project-icon:hover{
    color: rgb(129, 104, 50);
    transform: rotate(10deg);
    
}
#pro1:hover{
    /* border: 2px solid rgb(176, 170, 143); */
     border-left: 2px solid #e6c79c;
     transform: scale(1);
}
#pro2:hover{
    /* border: 2px solid rgb(176, 170, 143); */
     border-left: 2px solid #e6c79c;
     transform: scale(1);
}
.fa-moon{
    cursor: pointer;
}

@media(max-width:768px){
   
#navbar{
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 85px;
   position: relative;
   z-index: 2;
}
#navbar #right {
   justify-content: center;
   padding-bottom: 30px;
   gap: 10px;
   font-size: 13px;
    padding-left: 30px;
}
#navbar #left{
  justify-content: center;
  margin: 0;
  font-size: 13px;
  padding-bottom: 50px;
 
}
#front-left p{
    font-size: 16px;
    padding-left: 10px;
}
#front-left h2{
    font-size: 20px;
}
#front-left h3{
    font-size: 25px;
}
#front-left{
    line-height: 1.9rem;
    
}
#front-left p{
    line-height: 1.4rem;
}
#btn-group{
    gap: 10px;
    font-size: 15px;
}
#front-right #img img{
    height: 300px;
    width: 300px;
}
#front{
    height: 80vh;
}
#about-right #img img{
    height: 300px;
    width: 300px;
     margin-right: 15px;
}
#about-left{
line-height: 1.6rem;
font-size: 13px;
 margin-top: 0;
 width: 60%;
  padding-bottom: 70px;
}
#about-left h1{
    font-size: 40px;
}
#about-right{
     margin-top: 100px;
     margin-left: 0;
     margin-right: 15px;
}
#edu-journey{
    position: relative;
    padding-bottom: 30px;
    padding-top: 60px;
   box-sizing: border-box;
   font-size: 40px;
   z-index: 1;
}
#edu1{
    width: 98%;
}
#edu2{
    width: 98%;
}
#edu3{
    width: 98%;
}
#project h2{
    font-size: 20px;
}
#project h3{
    font-size: 26px;
}
#project p{
    font-size: 18px;
}

#project{
 
  margin-top: 40px;
}
.project-skill i{
    font-size: 30px;
}
#skill-left{
    width: 45%;
    font-size: 20px;
    margin-left: 25px;
    margin-top: 60px;
    line-height: 2.5rem;
}
#skill-right{
    width: 45%;
    font-size: 20px;
    margin-left: 20px;
    margin-top: 60px;
    line-height: 2.5rem;
}
#skill h3{
    font-size: 32px;
}
#tech-skill i{
    font-size: 25px;
}
}