@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/eb-garamond-regular.ttf") format("truetype");
}

* { box-sizing: border-box; }

html {
  background: #101010;
  color: #efefeb;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

main {
  width: min(100% - 48px, 640px);
  margin: 76px auto 80px;
  line-height: 1.55;
}

header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
h1 { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.3px; }
.handle { color: #92928e; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
p { margin: 0 0 20px; }
.credentials { margin-bottom: 28px; color: #b7b7b0; font-size: 16px; }
.experience-intro { margin-bottom: 8px; }
h2 { margin: 29px 0 12px; color: #a1a19a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 400; letter-spacing: .06em; }

ul {
  padding-left: 20px;
  margin: 0 0 22px;
}

li { padding-left: 1px; }
li + li { margin-top: 5px; }
li::marker { color: #767671; font-size: .72em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: #686862;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

a:hover { color: #fff; text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid #e2e2d8; outline-offset: 4px; border-radius: 1px; }
::selection { color: #101010; background: #e2e2d8; }

footer { margin-top: 30px; }
.copyright { margin: auto 24px 22px; color: #999993; font-size: 14px; line-height: 1.5; }
nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.profile { white-space: nowrap; }
.profile span { color: #767671; margin-right: 4px; }

@media (max-width: 480px) {
  main { margin-top: 36px; }
  nav { column-gap: 7px; }
}

@media (max-width: 400px) {
  .email { flex-basis: 100%; }
  .profile:first-of-type span { display: none; }
}