@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
    background-color: rgb(0, 0, 0);
    color: white;
    text-decoration: none;
}
header
{
    display: flex;
    justify-content: space-between;
    margin: 5rem 5rem 0rem 5rem;
}
.logo
{
    color: rgb(42, 165, 144);
    font-size: 2rem;
    font-weight: 600;
    transition: 0.5s ease;
}
.logo:hover
{
    transform: scale(1.1);
}
header nav a
{
    font-size: 1.6rem;
    margin-right: 2rem;
    transition: 0.5s ease;
    border-bottom: 2px solid transparent;
}
header nav a:hover
{
    border-bottom: 2px solid rgb(83, 196, 177);
    color: rgb(73, 192, 192);
}
.active
{
    color: rgb(75, 199, 191);
    border-bottom: 2px solid rgb(107, 192, 186);
}
.main-content
{
    margin: 5rem 0rem 0rem 5rem;
}
.main-content h1
{
    font-size: 3rem;
}
.main-content h1 span
{
    color: rgb(87, 189, 184);
}
.main-content h3
{
    font-size: 1.5rem;
}
.main-content h3 span
{
    color: rgb(93, 195, 157);
}
.content
{
    margin: 1rem 0rem 0rem 5rem;
    width: 21rem;
    font-weight: 500;    
}
.social-icons
{
    margin: 1.5rem 0rem 0rem 5rem;
    font-size: 35px;
}
.social-icons a
{
    margin-right: 1.3rem;
    transition: 0.5s ease;
}
.social-icons a:hover
{
    text-shadow: 0px 0px 15px rgb(0, 255, 255);
}
.btn
{
    margin: 2.5rem 0rem 0rem 4.5rem;
    font-size: 25px;
    font-weight: 600; padding: 15px 30px;
    border: 200px ;
    outline: none;
    color:#FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 20px;
    
}
.btn a
{
    padding: 15px 30px;
    border: 200px ;
    outline: none;
    color:#FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 20px;
}
.image
{
    margin: -23rem 0rem 0rem 62rem;
}
.image img
{
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 4px solid rgb(64, 230, 224);
    box-shadow: 0px 0px 30px rgb(99, 170, 115);
    transition: 0.5s ease;
}
.image img:hover
{
    transform: scale(1.1);
    box-shadow: 0px 0px 20px rgb(193, 215, 103);
}
.btn
{
    margin: 2.5rem 0rem 0rem 4.5rem;
    font-size: 25px;
    background: transparent;
    font-weight: 600;
}
.btn a
{
    border: 5px solid rgb(69, 178, 172);
    border-radius: 50px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    transition: 0.5s ease;
}
.btn a:hover
{
    box-shadow: 0px 0px 20px rgb(148, 196, 211);
}

.service-content
{
    font-size: 30px;
    margin-top: 5.8rem;
    transition: 0.5s;
}
.service-content td i
{
    margin-right: 1.5rem;
}
.text
{
    font-weight: 600;
}
.service-content tr td{
    padding-bottom: 1rem;

}
.service-content tr
{
    transition: 0.5s ease;
}
.service-content tr:hover
{  
    
    cursor: pointer;
    text-shadow: 0px 0px 15px rgb(74, 213, 174);
    transform: scale(1.1);
   
}.skill-container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
    margin: 6rem 5rem 3rem 9.5rem;
}
.skill-container div
{
    border: 3px solid rgb(147, 83, 128) (42, 122, 165);
    width: 260px;
    height:290px;
    border-radius: 30px;
    box-shadow: 0px 0px 20pX rgb(58, 122, 132);
    transition: 1s ease;
    margin-bottom: 1rem;
    margin-top:.5rem;
    padding: 10px;

}
.skill-container div:hover
{
    box-shadow: 0px 0px 18px (0, 255, 255);
    border: 3px solid rgb(86, 214, 171);
    transform: scale(1.1);
  
}
.skill-container div h3
{
    font-size: 22px;
    margin-top: 1rem;
}
.skill-container div p
{   
    font-size: 18px;
    margin-top: 0.5rem;
    background-color: transparent;
}
.edu tr:hover
{
    cursor: grab;
    transition: 0.5s ease;
    box-shadow: 0px 0px 50px rgb(132, 194, 201);
     
}
.edu 
{
    margin-top: 6rem;
    transform: scale(1.1);

}
.edu ,.edu th,.edu td 
{
    border: 1px solid rgb(123, 207, 200);
    
}
.edu th
{
    font-size: 20px;
    padding: 1.7rem;
}
.edu td
{
    font-size: 18px;
    padding: 1rem;
}
.cont
{
    margin-top: 3.5rem;
    font-size: 30px;
}
.cont tr td i
{
    margin-right: 2rem;
}
.cont tr
{
    margin-bottom: 1.5rem;
    transition: 0.5s ease;
}
.cont tr:hover
{
    text-shadow: 0px 0px 15px rgb(0, 255, 255);
}
hr
{
    width: 1200px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.post
{
    color: rgb(104, 225, 223);
}
.post::before
{
    animation: 10s words infinite;
    content: " ";
}
.post::after
{
    content: " ";
}
@keyframes words
{
    0%,25%
    {
        content: "software developer";
    }
    25%,75%
    {
        content: "database devloper";
    }
    50%,75%
    {
        content: "python web devlopment";
    }
    75%,100%
    {
        content: "Prompt engineer";
    }
}
@media (max-width:431px)
{
    *
    {
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
    }
    body
    {
        width: 294px;
    }
    header
    {
        display: block;
        width: 294PX;
        margin-top: 2rem;
        margin-left: 25px;
    }
    .logo
    {
        margin-left: 5rem;
        text-align: center;
        font-size: 1.7rem ;
        margin-bottom: 1rem;
    }
    header nav
    {
        text-align: center;
        margin-left: 4.5rem ;
        
    }
    header nav a
    {
        font-size: 20px;
        margin-right: 6px;
        text-align: center;
        padding-inline: 2px;
    }
    .main-content
    {
        margin: 1rem 0.1rem 0rem 5.7rem;
        text-align: center;
    }
    .main-content h1
    {
        font-size: 1.8rem;
        text-align: center;
    }
    .main-content h3
    {
        text-align: center;
        font-size: 1.2rem;
        margin-left: 2rem;
    }
    .content
    {
        margin: 1rem 2rem 2rem 3.3rem;
        width: 294px;
        font-weight: 500;
        font-size: 0.8rem;
        text-align: center;    
    }
    .social-icons
    {  
        margin: 1.7rem 0rem 0rem 6rem;
        font-size: 32px;
        text-align: center;

    }
    .social-icons a
    {
        margin-right: 0.8rem;
        transition: 0.5s ease;
    }
    .btn
    {
        margin: 19rem 0rem 0rem 5.5rem;
        font-size: 25px;
        font-weight: 600;
    }
    .btn a
    {
    border: 5px solid rgb(96, 182, 172);
    border-radius: 40px;
    padding: 0.3rem 1rem 0.5rem 1rem;
    transition: 0.5s ease;
    }
    .image
    {
        margin: -20rem 0rem 0rem 6rem;
        text-align: center;
    }
    .image img
    {
        height: 200px;
        width: 200px;
    }
    .service-content
    {
        font-size: 30px;
        margin-top:5rem;
        margin-left: 5rem;
    }
    .service-content td i
    {
        margin-right:1.5rem;
        
    }
    .text
    {
        font-weight: 500px;
    }
    .service-content tr td
    {
        padding-bottom: 2rem;
    }
    .service-content tr
    {
        transition: 0.5s ease;
    }
    .service-content tr:hover
    {
        cursor: pointer;
        text-shadow: 0px 0px 200px rgb(0, 183, 255);
        transform: scale(1.1);
    }
    .skill-container
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
        margin: 2rem 1rem 1rem 5.2rem;
    }
    .edu
    {
        margin-left: 5rem;
    }
    hr
    {
        width: 200px;
        margin-top: 3.5rem;
        margin-bottom: 3.5rem;
    }
    .map
    {
        width: 350px;
        margin-left: 35 px;
    }
    .cont
    {
        font-size:30px;
        margin-left:65px;
    }
}