style.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

.logo{
    position: absolute;
    left: 0%;
    right: 93.98%;
    top: 28.57%;
    bottom: 5.71%;
    background-image: url("./site-logo.png");
}
.navbar{
    position: absolute;
    width: 1120px;
    height: 35px;
    left: calc(50% - 1120px/2);
    top: 102px;
}
.navbarMenu{
    position: absolute;
    width: 384.91px;
    height: 20px;
    left: 735.09px;
    top: 13px;
}
.workbox{
    position: absolute;
    left: 65.63%;
    right: 29.94%;
    top: 37.14%;
    bottom: 5.71%;
    }
.workboxText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.aboutbox{
    position: absolute;
    left: 72.9%;
    right: 21.88%;
    top: 37.14%;
    bottom: 5.71%;
}
.angle a{
    text-decoration: none;
    color: black !important;
}
.angle a:hover{
    background-color: rgb(6, 156, 243);
    color: black !important;
    border-radius: 10px;
    border-style: 10px solid;
    padding: 10px;
}

.about_angle a{
    text-decoration: none;
}
.about_angle a:hover{
    background-color: burlywood;
    color: black !important;
    border-radius: 10px;
    border-style: 10px solid;
    padding: 10px;
}
.aboutText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;

}
.playgroundbox{
    position: absolute;
    left: 80.96%;
    right: 9.74%;
    top: 37.14%;
    bottom: 5.71%;
    font-family: 'DM Sans', sans-serif;
}
.playgroundText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.contactbox{
    position: absolute;
    left: 93.09%;
    right: 0%;
    top: 37.14%;
    bottom: 5.71%;
    font-family: 'DM Sans', sans-serif;
}
.contactText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}

.headline{
    position: absolute;
    width: 1056px;
    height: 283.22px;
    left: 160px;
    top: 360px;
}
.headlineContent1{
    position: absolute;
    padding-left: 135px;
    width: 360px;
    height: 129px;
    left: calc(50% - 360px/2 - 380px);
    top: 360px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    line-height: 97.2%;
    letter-spacing: -0.03em;
    color: #181717;
}
.headlineContent2{
    position: absolute;
    width: 580px;
    height: 111px;
    left: calc(50% - 580px/2 + 206px);
    top: 424px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 117%;
    letter-spacing: -0.03em;
    color: #606060;
}
.headlineContent3{
    
    position: absolute;
    width: 33.61px;
    height: 38.04px;
    left: calc(50% - 33.61px/2 - 543.16px);
    top: 605.18px;
    background-image: url("./↓.png"); 
}

.body1{
    position: absolute;
    width: 1120px;
    height: 473px;
    left: 160px;
    top: 757px;
}
.projectname1{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 0%;
    bottom: 95.98%;

    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.project1Concept{
    position: absolute;
    left: 0%;
    right: 68.21%;
    top: 9.3%;
    bottom: 54.97%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.project1Sculpted{
    position: absolute;
    left: 0%;
    right: 71.84%;
    top: 30.66%;
    bottom: 61.95%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #606060;

}
.project1Link{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 73.36%;
    bottom: 22.41%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #181717;
}
.project1Thumbnail{
    position: absolute;
    left: 42.86%;
    right: 0%;
    top: 0%;
    bottom: 22.9%;
    background: #606060;
    background-image: url("https://media-exp1.licdn.com/dms/image/D4D12AQE7IL7yx0d5yQ/article-cover_image-shrink_600_2000/0/1663733128199?e=2147483647&v=beta&t=CDVyHztZm9oZZySweP_wj0vrlqY1Yb3bbfTkjKmkcOk");

}
.project1Seperator{
    position: absolute;
    left: 0.71%;
    right: -0.26%;
    top: 100%;
    bottom: 0%;
    border: 1.5px solid #181717;

}
.body2{
    position: absolute;
    width: 1120px;
    height: 473px;
    left: 160px;
    top: 1344px;
}
.projectname2{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 0%;
    bottom: 95.98%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.project2Concept{
    position: absolute;
    left: 0%;
    right: 68.21%;
    top: 9.3%;
    bottom: 54.97%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}.project2Sculpted{
    position: absolute;
    visibility: hidden;
    left: 0%;
    right: 71.84%;
    top: 30.66%;
    bottom: 61.95%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #606060;

}
.project2Link{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 73.36%;
    bottom: 22.41%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #181717;
}
.project2Sculpted{
    position: absolute;
    visibility: hidden;
    left: 0%;
    right: 71.84%;
    top: 30.66%;
    bottom: 61.95%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #606060;
}
.project2Thumbnail{
    position: absolute;
    left: 42.86%;
    right: 0%;
    top: 0%;
    bottom: 22.9%;
    background: #606060;
    background-image: url("https://blog.hubspot.com/hubfs/Software%20developer%20vs%20software%20engineer.jpg");
}
.project2Seperator{
    position: absolute;
    left: 0.71%;
    right: -0.26%;
    top: 100%;
    bottom: 0%;
    border: 1.5px solid #181717;

}

.body3{
    position: absolute;
    width: 1120px;
    height: 473px;
    left: 160px;
    top: 1931px;
}
.projectname3{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 0%;
    bottom: 95.98%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.project3Concept{
    position: absolute;
    left: 0%;
    right: 68.21%;
    top: 9.3%;
    bottom: 54.97%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.project3Sculpted{
    position: absolute;
    visibility: hidden;
    left: 0%;
    right: 71.84%;
    top: 30.66%;
    bottom: 61.95%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #606060;
}
.project3Link{
    position: absolute;
    left: 0%;
    right: 70.87%;
    top: 73.36%;
    bottom: 22.41%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #606060;
}
.project3Thumbnail{
    position: absolute;
    left: 42.86%;
    right: 0%;
    top: 0%;
    bottom: 22.9%;
    background: #606060;
    background-image: url(https://img.freepik.com/premium-photo/professional-software-developer-working-office-desk_522218-289.jpg);
}
.project3Seperator{
    position: absolute;
    left: 0.71%;
    right: -0.26%;
    top: 100%;
    bottom: 0%;
    border: 1.5px solid #181717;
}
.footer{
    position: absolute;
    width: 1120px;
    height: 20px;
    left: 160px;
    top: 2598px;
    padding-bottom: 50px;
}
.footerName{
    position: absolute;
    left: 0%;
    right: 75.82%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #2429AF;
}
.footerArtstation{
    position: absolute;
    left: 70.59%;
    right: 20.64%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.footerLinkedin{
    position: absolute;
    left: 82.2%;
    right: 9.03%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.footerTwitter{
    position: absolute;
    left: 93.8%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.aboutNavBar{
    position: absolute;
    width: 1120px;
    height: 35px;
    left: calc(50% - 1120px/2);
    top: 102px;
}
.aboutNavbarMenu{
    position: absolute;
    width: 384.91px;
    height: 20px;
    left: 735.09px;
    top: 13px;
}
.aboutWorkBox{
    position: absolute;
    left: 65.63%;
    right: 29.94%;
    top: 37.14%;
    bottom: 5.71%;
}
.aboutWorkText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.about_AboutBox{
    position: absolute;
    left: 72.9%;
    right: 21.88%;
    top: 37.14%;
    bottom: 5.71%;
}
.about_AboutText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.aboutPlaygroundBox{
    position: absolute;
    left: 80.96%;
    right: 9.74%;
    top: 37.14%;
    bottom: 5.71%;
}
.aboutPlaygroundText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.aboutContactBox{
    position: absolute;
    left: 93.09%;
    right: 0%;
    top: 37.14%;
    bottom: 5.71%;
}
.aboutContactText{
    position: absolute;
    left: 0%;
    right: -0.8%;
    top: 0%;
    bottom: -25%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717
}
.aboutSection{
    position: absolute;
    width: 1120px;
    height: 1242px;
    left: 160px;
    top: 360px;

}
.aboutSection_About{
    position: absolute;
    width: 1120px;
    height: 590px;
    left: 160px;        
    top: 360px;

}
.aboutSection_AboutName{
    position: absolute;
    width: 480px;
    height: 199px;
    left: calc(50% - 480px/2 - 320px);
    top: 360px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    line-height: 97.2%;
    letter-spacing: -0.03em;
    color: #181717;
}
.aboutSection_AboutDetail{
    position: absolute;
    width: 575px;
    height: 359px;
    left: calc(50% - 575px/2 - 272.5px);
    top: 591px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 117%;
    letter-spacing: -0.03em;
    color: #606060;
}
.profilePhoto{
    position: absolute;
    width: 421px;
    height: 590px;
    left: calc(50% - 421px/2 + 349.5px);
    top: 360px;
    background: url("https://static.vecteezy.com/system/resources/previews/003/549/556/original/space-galaxy-background-free-vector.jpg");
}

.aboutInfo{
    position: absolute;
    width: 623px;
    height: 216px;
    left: 160px;
    top: 1086px;
}
.infoTitle1{
    position: absolute;
    width: 124px;
    height: 20px;
    left: calc(50% - 124px/2 - 498px);
    top: 1089px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #181717;
}
.infoDetails1{
    position: absolute;
    width: 436px;
    height: 54px;
    left: calc(50% - 436px/2 - 155px);
    top: 1086px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.infoTitle2{
    position: absolute;
    width: 124px;
    height: 20px;
    left: calc(50% - 124px/2 - 498px);
    top: 1261px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #181717;
}
.infoDetails2{
    position: absolute;
    width: 401px;
    height: 44px;
    left: calc(50% - 401px/2 - 172.5px);
    top: 1258px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.info_Details_1{
    position: absolute;
    width: 213px;
    height: 22px;
    left: calc(50% - 213px/2 - 265.5px);
    top: 1164px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;   
    color: #181717;
}
.aboutContact{
    position: absolute;
    width: 1120px;
    height: 166px;
    left: 160px;
    top: 1436px;
}
.Contact_Seperator{
    position: absolute;
    width: 1120px;
    height: 2px;
    left: calc(50% - 1120px/2);
    top: 1436px;
    background: #181717;
}
.Contact_information{
    position: absolute;
    width: 347px;
    height: 71px;
    left: calc(50% - 347px/2 - 386.5px);
    top: 1509px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 117%;
    letter-spacing: -0.03em;
    color: #181717;
}
.Contact_Mail{
    position: absolute;
    width: 372px;
    height: 37px;
    left: calc(50% - 372px/2 + 295px);
    top: 1516px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 117%;
    letter-spacing: -0.03em;
    color: #181717;
}
.Contact_Symbol{
    position: absolute;
    width: 21px;
    height: 24px;
    left: calc(50% - 21px/2 - 290.5px);
    top: 1576px;
    background-image: url("./↓.png");
    transform: rotate(-90deg);
}
.Resume{
    position: absolute;
    width: 110px;
    height: 22px;
    left: calc(50% - 110px/2 + 164px);
    top: 1580px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 121.5%;
    letter-spacing: -0.03em;
    color: #181717;
}
.Resume a{
    text-decoration: none;
    color: black;
}


.about_footer{
    position: absolute;
    width: 1120px;
    height: 20px;
    left: 160px;
    top: 1772px;
    padding-bottom: 50px;
}
.about_footer_Name{
    position: absolute;
    left: 0%;
    right: 75.82%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #2429AF;
}
.about_footer_Artstation{
    position: absolute;
    left: 70.59%;
    right: 20.64%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.about_footer_Linkedin{
    position: absolute;
    left: 82.2%;
    right: 9.03%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}
.about_footer_Twitter{
    position: absolute;
    left: 93.8%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #181717;
}