:root {
  --primaryColor: #ff3e01;
  --light: #ffffff;
  --dark: #0e0d0e;
  --background: #f2f0ed;
  --gray: #e8e4e1;
  --gray2: #8b8987;

  --primary: #ed713a;
  --secondary: #8f48f6;
  --tertiary: #f23d3b;
  --semantic-dark: #161414;
  --semantic-100: #2f2d2d;
  --semantic-90: #4e4b4b;
  --semantic-80: #757171;
  --semantic-70: #9c9796;
  --semantic-60: #c3bcbb;
  --semantic-50: #eae2e1;
  --semantic-40: #ede7e6;
  --semantic-30: #f1eceb;
  --semantic-20: #f4f0f0;
  --semantic-10: #f8f5f5;
  --semantic-0: #fbf9f9;
  --semantic-white: #ffffff;
}

@font-face {
  font-family: "Inter";
  src: url(../assets/font/Inter-VariableFont_slnt\,wght.ttf);
}

@font-face {
  font-family: "Handwriting";
  src: url(../assets/font/NanumPenScript-Regular.ttf);
}

.handwritten {
  font-family: "Handwriting", sans-serif;
  font-size: 24px;
  line-height: 1; /* Prevents 24px line-height from blowing up parent line spacing */
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: 2px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  list-style: none;
  text-decoration: none;
  text-underline-offset: 4px;
  scroll-margin-top: 200px;
  scroll-behavior: smooth;
}

.light {
  color: var(--gray2);
}

body {
  background-color: var(--background);
  padding: 0px;
  margin: 0px;
}

.primaryNavigation {
  position: sticky;
  top: 0px;
  background-color: var(--background);
  z-index: 1000;
}

.navigationLogo {
  position: fixed;
  top: 22px;
  left: 22px;
}

.primaryTabs {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 0px 24px;
  background-color: var(--light);
}

.primaryTabActive {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.primaryTabActiveButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background-color: var(--background);
  border-radius: 12px 12px 0px 0px;
  padding: 16px 16px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
}

.primaryTabInactive {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  font-weight: 500;
}

.primaryTabInactiveButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 12px 12px 0px 0px;
  padding: 16px 16px;
  font-size: 14px;
  line-height: 14px;
  color: var(--semantic-90);
}

.primaryTabInactiveButton img {
  filter: grayscale(100%);
}

.primaryTabInactiveButton:hover {
  color: var(--dark);
}

.primaryTabInactiveButton:hover img {
  filter: grayscale(0%);
}

.productSubNavigation {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: center;
  padding: 24px 24px 0px 24px;
  border-bottom: 1px solid var(--semantic-50);
  gap: 24px;
}

.productSubNavigationTab {
  padding: 16px 0px;
  display: flex;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  border-bottom: 1.5px solid transparent;
  color: var(--gray2);
}

.productSubNavigation:hover .productSubNavigationTab:hover {
  color: var(--dark);
  transition: all 1s;
}

.productSubNavigationTabActive {
  border-bottom: 1.5px solid var(--dark);
  font-weight: 500x;
  transition: all 1s;
  color: var(--dark);
}

.productSubNavigationResumeContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  line-height: 14px;
}

.productSubNavigationSeparator {
  width: 1px;
  height: 20px;
  background-color: var(--semantic-50);
}

.productSubNavigationResumeButton {
  padding: 16px 0px;
  font-weight: 500;
}

.mobileViewResumeFloatingButtonGroup {
  display: none;
  width: 100%;
  position: fixed;
  bottom: 16px;
  margin: 0px 16px;
  z-index: 2000;
}

.overviewSection {
  padding: 100px;
}

.overviewContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.overviewContainer h1 {
  font-size: 72px;
  font-weight: 600;
  line-height: 124%;
  letter-spacing: -4px;
  text-align: center;
}

.overviewContainer p {
  font-size: 18px;
}

.overviewContainer p a {
  text-decoration: none;
}

.workSection {
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.sectionHeading {
  font-size: 40px;
  line-height: 124%;
  font-weight: 600;
  letter-spacing: -2px;
}

.sectionHeading br {
  display: none;
}

.workList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
}

.workCard {
  width: 48.25%;
  background-color: var(--light);
  border-radius: 40px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.workCardImage {
  width: 100%;
  border-radius: 24px;
}

.workCardContent {
  padding: 28px;
}

.workHeading {
  font-size: 14px;
  font-weight: 400;
  line-height: 172%;
}

.workReadMoreButton {
  margin-top: 4px;
  padding: 8px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: var(--light);
  font-size: 14px;
  font-weight: 400;
}

.workReadMoreButton img {
  margin-top: 3px;
}

.experienceSection {
  padding: 80px;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 40px;
}

.experienceSection .sectionHeading {
  flex: 1;
  position: sticky;
  top: 200px;
}

.experienceList {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.experienceCard {
  background-color: var(--light);
  border-radius: 40px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.experienceCardHeading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.experienceHeadingRole {
  font-size: 16px;
  font-weight: 600;
}

.experienceCompanyName {
  font-size: 24px;
  font-weight: 600;
}

.experienceDetails {
  font-size: 14px;
  line-height: 172%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aboutSection {
  z-index: 50;
  padding: 80px;
}

.aboutMeContainer {
  width: 100%;
  background-color: var(--light);
  border-radius: 40px;
  padding: 40px;
  display: flex;
  flex-direction: row;
  gap: 80px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.myImage {
  height: 500px;
  width: auto;
  border-radius: 16px;
}

.aboutMe {
  font-size: 14px;
  line-height: 172%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aboutMeButtonGroup {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.aboutMeButtonGroup a {
  width: fit-content;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--gray);
  border-radius: 12px;
}

.verticalSeparator {
  width: 1px;
  height: 20px;
  background-color: var(--gray);
  margin: 0px 4px;
}

.footerContainer {
  /* border-radius: 40px; */
  /* margin: 80px 80px 40px 80px; */
  z-index: 1000;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--light);
  gap: 40px;
}

.footerButtonGroup {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* padding: 20px 40px;
  border-radius: 10px;
  background-color: var(--light); */
}

.resumeButtonGroup {
  display: flex;
  flex-direction: row;
  gap: 1px;
}

.footerButtons {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 450;
  line-height: 14px;
  color: var(--dark);
  padding: 0px;
  border: none;
  outline: none;
  background-color: none;
  transition: all 0.5s;
}

.footerButtons:hover {
  text-decoration: underline;
}

.footerButtons img {
  height: 20px;
}

.footerTypeLogo {
  /* margin-top: 80px; */
  width: 100%;
}

.footerSeparator {
  width: 100%;
  height: 0.5px;
  background-color: var(--dark);
  opacity: 0.1;
  /* margin: 40px 0px; */
}

.footerCredits {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  align-items: center;
}

.footerCredits span {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray2);
}