@font-face {
  font-family: Inter;
  src: url('../images/') format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-default: #161619;
  --text-default: #e7e7f1;
  --_spacing---11: var(--_default---2rem-32px);
  --_spacing---8: var(--_default---1-25rem-20px);
  --_spacing---15: var(--_default---4rem-64px);
  --_default---5rem-80px: 5rem;
  --_spacing---14: var(--_default---3-5rem-56px);
  --_spacing---12: var(--_default---2-5rem-40px);
  --_default---0-75rem-12px: .75rem;
  --_spacing---1: var(--_default---0-25rem-4px);
  --_spacing---10: var(--_default---1-625-28px);
  --_spacing---9: var(--_default---1-5rem-24px);
  --_spacing---4: var(--_default---0-75rem-12px);
  --text-secondary: #b0b0bc;
  --_spacing---2: var(--_default---0-375rem-6px);
  --_spacing---0-5: var(--_default---0-125rem-2px);
  --_default---0rem: 0rem;
  --_default---0-125rem-2px: .125rem;
  --_default---0-25rem-4px: .25rem;
  --border-default: #323232;
  --_default---0-375rem-6px: .375rem;
  --_spacing---3: var(--_default---0-5rem-8px);
  --_default---0-5rem-8px: .5rem;
  --_default---0-625rem-10px: .625rem;
  --_spacing---5: var(--_default---0-875rem-14px);
  --_spacing---6: var(--_default---1rem-16px);
  --_default---0-875rem-14px: .875rem;
  --_spacing---7: var(--_default---1-125rem-18px);
  --_default---1rem-16px: 1rem;
  --_default---1-125rem-18px: 1.125rem;
  --_default---1-25rem-20px: 1.25rem;
  --_default---1-5rem-24px: 1.5rem;
  --_default---1-625-28px: 1.75rem;
  --_default---1-75rem-30px: 1.875rem;
  --_spacing---13: var(--_default---3rem-48px);
  --_default---2rem-32px: 2rem;
  --_default---2-25rem-36px: 2.25rem;
  --_default---2-5rem-40px: 2.5rem;
  --_default---2-75rem-44px: 2.75rem;
  --_default---3rem-48px: 3rem;
  --_default---3-5rem-56px: 3.5rem;
  --_default---4rem-64px: 4rem;
  --_default---4-25rem-68px: 4.25rem;
  --_default---4-5rem-72px: 4.5rem;
  --_default---5-25rem-84px: 5.25rem;
  --_default---6rem-96px: 6rem;
  --_default---7rem-112px: 7rem;
  --_default---8rem-128px: 8rem;
  --_default---10rem-160px: 10rem;
  --_default---12rem-192px: 12rem;
}

body {
  background-color: var(--bg-default);
  color: var(--text-default);
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

p {
  margin-bottom: 0;
}

.u-text-style-main.u-weight-medium.u-underline {
  text-decoration: underline;
}

.u-weight-medium {
  font-weight: 400;
}

.page_wrap {
  margin-top: var(--_spacing---11);
  margin-right: var(--_spacing---11);
  margin-left: var(--_spacing---11);
}

.page_wrap_inner {
  padding-bottom: var(--_spacing---15);
  grid-column-gap: var(--_default---5rem-80px);
  grid-row-gap: var(--_default---5rem-80px);
  flex-flow: column;
  display: flex;
}

.hero_main_wrap {
  justify-content: space-between;
  display: flex;
}

.hero_main_profile_img {
  width: 42px;
  height: 42px;
}

.hero_main_contain {
  grid-column-gap: var(--_default---0-75rem-12px);
  grid-row-gap: var(--_default---0-75rem-12px);
  flex-flow: column;
  max-width: 560px;
  display: flex;
}

.hero_main_profile {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.u-text-link-main {
  color: var(--text-default);
  text-decoration: none;
  transition: all 60ms;
}

.u-text-link-main:hover {
  text-decoration: underline;
}

.hero_main_links {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.project_wrap {
  grid-column-gap: var(--_spacing---12);
  grid-row-gap: var(--_spacing---12);
  flex-flow: column;
  max-width: 1000px;
  display: flex;
}

.project_contain {
  flex-flow: column;
}

.project_layout {
  grid-column-gap: var(--_spacing---9);
  grid-row-gap: var(--_spacing---9);
  flex-flow: column;
  display: flex;
}

.project_text_wrap {
  grid-column-gap: var(--_default---0-75rem-12px);
  grid-row-gap: var(--_default---0-75rem-12px);
  flex-flow: column;
  max-width: 560px;
  display: flex;
}

.project_visual_wrap {
  border-radius: var(--_spacing---4);
  overflow: hidden;
}

.project_visual_wrap.u-border {
  outline-offset: -3px;
  outline: 3px solid #252529;
}

.u-color-secondary {
  color: var(--text-secondary);
}

.project_visual_layout {
  grid-column-gap: var(--_spacing---8);
  grid-row-gap: var(--_spacing---8);
  display: flex;
}

.u-text-link-project {
  color: var(--text-secondary);
  transition: all 60ms;
}

.u-text-link-project:hover {
  color: var(--text-default);
}

.project_text_wrap_link {
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: static;
}

.u-text-style-lg {
  letter-spacing: -1px;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
}

.project_wrap_inner {
  grid-column-gap: var(--_spacing---15);
  grid-row-gap: var(--_spacing---15);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.u-text-style-xl {
  color: var(--text-default);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  text-decoration: none;
}

.u-text-style-xl.w--current {
  letter-spacing: -1px;
}

@media screen and (max-width: 767px) {
  .page_wrap {
    margin-top: var(--_spacing---8);
    margin-right: var(--_spacing---8);
    margin-left: var(--_spacing---8);
  }

  .page_wrap_inner {
    grid-column-gap: var(--_spacing---14);
    grid-row-gap: var(--_spacing---14);
  }

  .hero_main_wrap {
    grid-column-gap: var(--_spacing---12);
    grid-row-gap: var(--_spacing---12);
    flex-flow: column-reverse wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .hero_main_links {
    grid-column-gap: var(--_spacing---11);
    grid-row-gap: var(--_spacing---11);
    flex-flow: row;
  }

  .project_wrap {
    grid-column-gap: var(--_spacing---10);
    grid-row-gap: var(--_spacing---10);
  }

  .project_visual_layout {
    flex-flow: column;
  }

  .project_wrap_inner {
    grid-column-gap: var(--_spacing---14);
    grid-row-gap: var(--_spacing---14);
  }
}


@font-face {
  font-family: 'Inter';
  src: url('../images/') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}