*{
    margin: 0;
    padding: 0;
   
}
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color:floralwhite;
}

html{
    scroll-behavior: smooth;
}

p{
    color:rgb(85,85,85);

}

/*transition*/
a,.btn{
    transition: all 300ms ease;
}

/*desktop nav*/

nav,.navlinks{
    display: flex;
    flex-wrap: wrap;
}

nav{
    justify-content: space-around ;
    align-items: center;
    height: 17vh;
}
.navlinks{
    gap: 2rem;
    list-style: none;
    font-size: 1.5rem;

}

a{
    color: rgb(123,63,0);
    text-decoration: none;
    text-decoration-color: white;

}
.jp{
    font-size: 2rem;
}
a:hover{
    color:darkgreen;
    text-decoration: underline;
    text-underline-offset: 1rem;
    text-decoration-color: rgb(181,181,181);
}

.name{
    color: rgb(123,63,0);
}


section{
    padding-top: 4vh;
    height: 96vh;
    margin: 0 10rem;
    box-sizing: border-box;
    min-height: fit-content;

}

.section-container{
    display: flex;
}

/*profile section*/

#profile{
    display: flex;
    justify-content: center;
    gap: 5rem;
    height: 80vh;
   
}

#About{
    font-size: 20px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(226, 0, 116);
    background-color: beige;
    text-align: center;
    border-width: 10px;

    
}
#Experience{
    font-size: 20px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#Skills{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px; 
    background-color: beige;
    text-align: center;
    border-width: 2px;

    
}

#Projects{
    font-size: 20px; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    border-width: 2px;

}

#award{
    font-size: 20px; 
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-width: 2px;

}

#Community{
    font-size: 20px; 
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-width: 2px;

}
#Contact{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px; 
    background-color: beige;
    text-align: center;
    border-width: 2px;

    
}

div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  
.piccontainer{
    display:flex;
    width: 300px;
    height: 300px;
    margin: auto;

}
.ava{
    vertical-align: middle;
    width: 300px;
    height: 350px;
    border-radius: 100%;
  

}

.section_text{
    text-align: center;
    margin: auto;
    margin-top: 2ch;
}

.section_text p {
    font-weight: 600;
}

.sec1_text{
    text-align: center;
   
}
.sec1_text{
    font-size: 1.75rem;
    margin-bottom: 1rem;
   
}
.sec2_text{
    font-size: 1.75rem;
    margin-bottom: 1rem;
   
}

.title{
    font-size: 3rem;
    text-align: center;
}


#social_containers{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;

}

/*icon*/
.icon{
    cursor:pointer;
    height: 3rem ;
 
}

.button_container{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.btn{
    font-weight: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;

}

.btn-color-1, .btn-color-2{
    border: rgb(53,53,53) 0.1rem solid;
    ;
}
.btn-color-1:hover, .btn-color-2:hover{
   cursor: pointer;
}

.btn-color-1:hover, .btn-color-2:hover{
    background: rgb(53,53,53);
    color: white;
    
 }
 .btn-color-1:hover{
    background: rgb(0,0,0);
   
 }

 .btn-color-2{
    background: none
 }

 
 .btn-color-2:hover{
    border: rgb(255,255,255) 0.1rem solid;

 }

 .button_container{
    gap: 1rem;
 }