:root {
  --font: system-ui, sans-serif;

  --black-mesa: #121212;
  --monochrome: #e8e8e8;
  --cocainum: #fff;

  --bb-1: 2px solid var(--black-mesa);
  --bb-2: 2px solid var(--monochrome);
  --lh-1: 1;
  --lh-2: 1.25;
  --lh-3: 1.5;
  --lh-4: 1.75;

  --mt-0: 0;
  --mt-1: 0.25rem;
  --mt-2: 0.5rem;
  --mt-3: 1rem;
  --mt-4: 1.5rem;
  --mt-5: 3rem;
  --mt-6: 4rem;
  --mt-7: 5rem;
  --mt-8: 6rem;
  --mt-9: 8rem;

  --h1: 8rem;
  --h2: 4rem;
  --h3: 3rem;
  --p1: 2.5rem;
  --p2: 2rem;
  --p3: 1.5rem;
  --p4: 1.375rem;
  --p5: 1.125rem;
  --h1-sm: 3.5rem;
  --h2-sm: 3rem;
  --h3-sm: 2.5rem;
  --p1-sm: 1.75rem;
  --p2-sm: 1.5rem;
  --p3-sm: 1.25rem;
  --p5-sm: 1.125rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  background-color: var(--monochrome);
  color: var(--black-mesa);
  font-family: var(--font);
  font-weight: 400;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: var(--lh-3);
  max-width: 1280px;
  margin: auto;
}

header {
  display: flex;
  justify-content: space-between;
  max-width: 64rem;
  margin: 0 8rem;
  padding: 5rem 0;
}

/* less than 768px */
@media (width < 48rem) {
  header {
    margin: 0 1.25rem;
    padding: 2rem 0 4rem 0;
  }
}

@media (48rem <= width < 64rem) {
  header {
    margin: 0 4rem;
  }
}

.link-sm {
  display: inline-block;
  color: var(--black-mesa);
  text-decoration: none;
  border-bottom: var(--bb-1);
  font-size: var(--p3);
}

.link-sm:hover,
.link-sm.link-active {
  border-bottom: var(--bb-2);
}

.link-l {
  display: inline-block;
  color: var(--black-mesa);
  text-decoration: none;
  border-bottom: var(--bb-1);
  font-size: var(--p2);
}

.link-l:hover {
  border-bottom: var(--bb-2);
}

.mt-4 {
  margin-top: var(--mt-4);
}

main {
  margin: 0 0 8rem 8rem;
}

/* less than 768px */
@media (width < 48rem) {
  main {
    margin: 0 1.25rem 5rem 1.25rem;
  }
}

/* more than or equal 768px and less than 1024px */
@media (48rem <= width < 64rem) {
  main {
    margin: 0 4rem 8rem 4rem;
  }
}

/* greater than or equal 1024px */
/* @media (width >= 1024px) {
  main {
  }
} */

section {
  margin-top: var(--mt-9);
}

section:first-of-type {
  margin-top: var(--mt-0);
}

@media (width < 48rem) {
  section {
    margin-top: var(--mt-7);
  }
}

h1,
h2,
h3,
h4 {
  font-weight: inherit;
}

h1 {
  font-size: var(--h1);
  line-height: var(--lh-1);
}

h2 {
  font-size: var(--h2);
  line-height: var(--lh-2);
}

h3 {
  margin-top: var(--mt-6);
  font-size: var(--h3);
  line-height: var(--lh-2);
}

@media (width < 48rem) {
  h1 {
    font-size: var(--h1-sm);
    line-height: var(--lh-1);
  }

  h2 {
    font-size: var(--h2-sm);
    line-height: var(--lh-2);
  }

  h3 {
    margin-top: var(--mt-6);
    font-size: var(--h3-sm);
    line-height: var(--lh-2);
  }
}

.intro {
  max-width: 48rem;
}

.services,
.works,
.hire-me {
  max-width: 40rem;
}

.works-list div {
  margin-top: var(--mt-5);
}

.p1,
.p2,
.p3,
.p4 {
  opacity: 0.8;
}

.p1 {
  margin-top: var(--mt-6);
  font-size: var(--p1);
  line-height: var(--lh-3);
}

.p2 {
  margin-top: var(--mt-4);
  font-size: var(--p2);
}

.p3 {
  margin-top: var(--mt-3);
  font-size: var(--p3);
  line-height: var(--lh-4);
}

.p4 {
  margin-top: var(--mt-3);
  font-size: var(--p4);
}

.p5 {
  margin-top: var(--mt-2);
  font-size: var(--p5);
  opacity: 0.6;
}

@media (width < 48rem) {
  .p1 {
    margin-top: var(--mt-5);
    font-size: var(--p1-sm);
    line-height: var(--lh-3);
  }

  .p2 {
    margin-top: var(--mt-4);
    font-size: var(--p2-sm);
  }

  .p3 {
    margin-top: var(--mt-3);
    font-size: var(--p3-sm);
    line-height: var(--lh-4);
  }

  .p5 {
    margin-top: var(--mt-2);
    font-size: var(--p5-sm);
  }
}