*
{
    scroll-behavior: smooth;
    /* outline: 1px solid red; */
}

body
{
    font-family: "Poppins", sans-serif;
    color: white;
    /* color: #a5aab3; */
    background-color: #030712;
    user-select: none;
}

/* h1, h2, h3
{
    color: white;
} */

nav
{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    backdrop-filter: blur(20px);
    width: 100%;
    height: 4.5rem;
    z-index: 999;
    top: 0;
}

nav > .logo-container > .logo
{
    height: 3rem;
}

.logo 
{
    filter: invert(100%);
}

.nav-list
{
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    width: 95%;
}

.nav-list #sep-line
{
    background-color: white;
    height: 0.15rem;
    width: 1.5rem;
    transform: rotate(90deg);
    background-color: #1f2937;
}

#enable-light-mode-icon
{
    scale: 1.2;
}

#download-cv
{
    background-color: #f9fafb;
    padding: 0.4rem;
    border-radius: 5px;
}

#download-cv > a
{
    color: black;
}

main
{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 11rem;
    margin-top: 9.5rem;
}

.flex-container
{
    display: flex;
    justify-content: center;
}

.row-flex-container
{
    display: flex;
    flex-direction: row;
}

.column-flex-container
{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.flex-center
{
    justify-content: center;
    align-items: center;
}

.flex-container.home-content-container
{
    flex-direction: column;
    width: 50%;
}

#intro-container
{
    margin-bottom: 1.5rem;
}

#details-container
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

#location-container
{
    display: flex;
    align-items: center;
}

#location-container > i
{
    margin-right: 2.2rem;
}

#location-container > span
{
    position: relative;
    left: -1.3rem;
}

#available-container
{
    display: flex;
    align-items: center;
    left: -0.9rem;
    position: relative;
}

#socials-container
{
    display: flex;
    gap: 1rem;
}

#home #my-pic
{
    /* width: 35%; */
    width: 15rem;
    border: solid 0.6rem black;
    box-shadow: 2rem 2rem #374151;
}

.flex-container.my-pic-container
{
    align-items: center;
    flex-direction: row;
    width: 50%;
}

section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
}

section:first-of-type
{
    margin-top: 10rem;
}

section > h2
{
    margin-top: 3rem;
}

section > h3
{
    margin: 3rem 0;
}

section#about
{
    background-color: #111827;
}

.section-heading
{
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 25px;
    background-color: #374151;
}

#description-container, #pic-container
{
    width: 50%;
}

#pic-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6rem;
}

section#about #my-pic
{
    height: 25.625rem;
    object-fit: contain;
    border: solid 0.6rem black;
    box-shadow: -2rem 2rem #374151;
    position: sticky;
    bottom: 5rem;
}

#about-content
{
    margin-right: 10rem;
}

#about-content ul
{
    margin-left: 0.9rem;
}

.show-list-style
{
    list-style-type: disc;
    margin-bottom: 0.5rem;
}

.skills-img
{
    width: 4rem;
    transition: scale 0.2s ease-in;
}

.skills-img:hover
{
    scale: 1.2;
}

.grid-container
{
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto auto auto;
    column-gap: 7rem;
    row-gap: 3rem;
}

#skills > h2
{
    margin-bottom: 2rem;
}

#skills > h3
{
    margin-bottom: 5rem;
}

#skills
{
    margin-bottom: 1rem;
}

section#experience
{
    background-color: #111827;
}

/* section#experience h3
{
    margin: 3rem 0rem;
} */

.experience-container
{
    background-color: #1f2937;
    justify-content: center;
    align-items: flex-start;
    width: 70%;
    border-radius: 15px;
    column-gap: 3rem;
    padding: 1rem;
}

.experience-details
{
    width: 50%;
}

.company-logo
{
    height: 2.2rem;
    margin-top: 1.7rem;
}

.experience-timeline
{
    margin-top: 1.4rem;
}

/* section#experience li
{
    margin-bottom: 0.3rem;
} */

section#testimonial
{
    background-color: #111827;
}

.testimonial-content
{
    width: 50%;
    font-size: 0.9rem;
}

.testimonial-container
{
    background-color: #1f2937;
    width: 70%;
    border-radius: 15px;
    padding: 2rem 0em;
    row-gap: 0;
    margin-bottom: 3rem;
}

.testimonial-container:last-of-type {

    margin-bottom: 0rem;
}

.testimonial-giver-image
{
    height: 6rem;
    clip-path: circle();
    margin-bottom: 1rem;
}

.testimonial-giver-name
{
    margin-right: 0.3rem;
}

.projects-container
{
    width: 85%;
    margin-bottom: 3rem;
}

.projects-container:last-of-type
{
    margin-bottom: 0;
}

.project-preview-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    background-color: #374151;
    padding: 2rem 0rem;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.project-details-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    background-color: #1f2937;
    padding: 4rem;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.project-details-container > h3
{
    font-style: italic;
}

.project-tech-stack-container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    gap: 1rem;
}

.project-details-container > div span
{   
    font-size: 0.8rem;
    background-color: #374151;
    border-radius: 25px;
    padding: 0.5rem 1rem;
}

.project-preview-image
{
    width: 85%;
    border-radius: 15px;
    transition: scale 0.5s ease-in;
}

.project-preview-image:hover
{
    scale: 1.1;
}

.external-link
{
    position: relative;
    top: 2rem;
}

.external-link-image
{
    height: 1rem;
    transition: scale 0.2s ease-in;
}

.external-link-image:hover
{
    scale: 1.2;
}

section#contact > div:first-of-type, section#contact > div:nth-of-type(2)
{
    column-gap: 1rem;
}

section#contact > div:first-of-type > i
{
    scale: 1.7;
}

section#contact > p:nth-of-type(2)
{
    margin-bottom: 3rem;
}

section#contact > h2
{
    margin-bottom: 4rem;
}

section#contact
{
    margin-bottom: 1rem;
}

.social-handles-icons
{
    width: 2rem;
}

.social-handles-icons.circled
{
    clip-path: circle();
}

.copy-btn
{
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 3px;
}

.copy-btn:hover
{
    background-color:#1f2937;
}

footer
{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    background-color: #111827;
    height: 4rem;
    font-size: 0.9rem;
}

@media screen and (max-width: 1200px)
{
    html
    {
        font-size: 12px;
    }
}

@media screen and (max-width: 900px)
{
    html
    {
        font-size: 10px;
    }
}

@media screen and (max-width: 700px)
{
    html
    {
        font-size: 7px;
    }
}

@media screen and (max-width: 500px)
{
    html
    {
        font-size: 6px;
    }
}

@media screen and (max-width: 400px)
{
    html
    {
        font-size: 5px;
    }
}

@media screen and (max-width: 300px)
{
    html
    {
        font-size: 4.5px;
    }
}

@media screen and (max-width: 200px)
{
    html
    {
        font-size: 3px;
    }
}