@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');

body {
    /* background-color: #0F0F0F; */
    background-image: linear-gradient(to right, #0F0F0F , #313131);
    /* background-image: url('./bg2.jpg');
    background-size: 100%;
    background-repeat: no-repeat; */
    /* background-attachment: fixed; */
    background-size: cover;
    color: #E1E1E1;
    font-family: 'Poppins';
    text-align: center;
    /* width: 100vw; */
    height: 100vh;
}

/* p{
    color: #000;
} */

a{
    text-decoration: none;
}

/* start mobile first */

/* hero css */
.downloadResume {
    border: #8b8b8b 1px solid;
    background-color: #E1E1E1;
    border-radius: 3rem;
    width: 190px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    color: #0F0F0F;
}

.sosmed{
    margin-top: 1rem;
}

.sosmed a{
    color: #E1E1E1;
}

.downloadResume p {
    margin: 0;
}

.nama img {
    width: 229.059px;
    height: 229.059px;
    flex-shrink: 0;
}

.nama p {
    margin: 0px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    /* text-align: justify; */
}

.nama h1 {
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -3.805px;
    margin: 0;
    margin-left: 1rem;
    margin-right: 1rem;
}

.nama h2 {
    margin-top: 0;
}

.position {
    background: linear-gradient(95deg, #9C83FF 57.09%, #FF9051 87.74%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 1rem;
    font-size: 26.107px;
    margin-right: 1rem;
}

.herosection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* end hero css */

/* About me css*/
.aboutmeSection{
    margin-top: 10rem;
}

.aboutme h1 {
    color: #FFF;
    /* font-family: Inter; */
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.35px;
}


.aboutmeText {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


.aboutmeText p {
    text-align: justify;
    /* font-family: Inter; */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* end About me css */

/* experience section */
.experienceSection {
    margin-top: 10rem;
}

.experienceTitle h1 {
    color: #FFF;
    text-align: center;
    /* font-family: Inter; */
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.35px;
}

.experience {
    text-align: justify;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.experienceText{
    font-weight: 500;
    text-align: justify;
}

/* .experience {
    margin: 0;
    margin-top: 3rem;
    text-align: left;

} */

.experienceOrganization {
    display: flex;
    text-align: left;

}

.nameOrg {
    margin-left: 1rem;
}

.nameOrg p {
    margin: 0px;
    color: #8b8b8b;
}

.nameOrg h1 {
    color: #FFF;
    /* text-align: center; */
    /* font-family: Inter; */
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0;
}


.experienceOrganization img {
    width: 50px;
    height: 50px;
}

.experienceRole {
    border: #8b8b8b 1px solid;
    background-color: #E1E1E1;
    border-radius: 3rem;
    width: 235px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    color: #0F0F0F;
}

.experienceRole p {
    margin: 0;
}

.experienceDetailDate p{
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.experienceDetailWork p{
    margin-top: 0;
    font-weight: 200;
    text-align: left;
    /* margin-top: 2rem; */
}

.experienceDetailResponsibility{
    margin-top: 2rem;
}

.experienceDetailResponsibility p{
    margin-top: 0;
}

.responsibilityTitle{
    font-weight: 500;
}

.responsibilityList{
    margin-top: 0;
    padding-left: 20px;
}

.responsibilityList li{
    font-weight: 200;
    text-align: left;
}

.experience1{
    margin-top: 3rem;
    padding: 1rem;
    /* padding-left: 2rem; */
    border: #292929aa 1px solid;
    border-radius: 2rem;
    background-image: linear-gradient(to bottom, #272727aa , #494949aa);
    /* background-color: #494949aa; */
    /* opacity: 0.8; */
}

/* end experience section */


/* project section */
.projectSection {
    margin-top: 10rem;
}

.projectTitle h1 {
    color: #FFF;
    text-align: center;
    /* font-family: Inter; */
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.35px;
}

.projects{
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    width: 80%;
}

.project1{
    /* margin-top: 3rem; */
    margin-top: 3rem;
    padding: 1rem;
    border: #292929aa 1px solid;
    border-radius: 2rem;
    background-image: linear-gradient(to bottom, #272727aa , #494949aa);
}

.project1 img{
    width: 50px;
    height: 50px;
}

.project1 a{
    color: #E1E1E1;
}

.projectTechstackWrap{
    display: flex;
    justify-content: space-between;
    width: 15rem;
}

.projectTechstackWrap1{
    display: flex;
    justify-content: space-between;
    width: 10rem;
}


.project1 h1{
    font-size: 16px;
}

.project1 p{
    font-weight: 200;
}
/* end project section */

/* footer */
.footer{
    margin-top: 12rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 80%;
    
}

.footer h1{
    color: #FFF;
    text-align: left;
    /* font-family: Inter; */
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -1.35px;
}

.sosmedWrap{
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
}


/* end mobile first */



/* tablet and above */
@media (min-width: 768px) {
    /* hero section */

    .nama h1 {
        font-size: 63.419px;
        margin: 0;
    }

    .position {
        font-size: 26.107px;
    }

    /* about me */
    .aboutme h1 {
        font-size: 45px;
    }

    /* experience */
    /* .experienceRole {
        width: 230px;
        height: 50px;
    }

    .experienceRole p {
        padding-left: 1rem;
        padding-right: 1rem;
    } */
    
    .experience1{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .experienceText {
        text-align: center;
    }

    /* projects */
    .project1{
        padding-left: 2rem;
        padding-right: 2rem;
    }
/* 
    .projectTechstack{
        width: 33%;
    } */
}

/* @media (min-width: 1024px){
    .projectTechstack{
        width: 30%;
    }
}

@media (min-width: 1440px){
    .projectTechstack{
        width: 20%;
    }
}
 */