:root {
  color-scheme: dark;
  --bg: #080808;
  --text: #f2f2f0;
  --muted: #929292;
  --accent: #ff70b7;
  --sans: 'Manrope', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.link-home {
  width: min(460px, calc((100vw - 40px) / 1.5));
  zoom: 1.5;
  height: calc(100svh / 1.5);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0;
}

.identity {
  margin-bottom: 34px;
  text-align: center;
}

.avatar {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 24px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.identity h1 {
  display: flex;
  justify-content: center;
  gap: .38em;
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 800;
}

.link-list { 
  display: grid;
  gap: 6px;
}

.link-list > a,
.projects > a {
  position: relative;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 0 44px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #dededb;
  background: transparent;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  transition: background .17s, color .17s, transform .17s;
}

.link-list > a:hover,
.projects > a:hover {
  background: #151515;
  color: #fff;
  transform: translateY(-1px);
}

.link-icon {
  color: var(--muted);
  font-size: 17px;
}

.link-arrow {
  position: absolute;
  right: 20px;
  color: var(--accent);
  font-size: 17px;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .17s, transform .17s;
}

.link-list a:hover .link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.projects {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #2a2a2a;
  text-align: center;
}

.projects h2 {
  margin: 0 0 6px;
  color: var(--muted);
  font: 12px var(--mono);
}

@media (max-width: 480px) {
  .link-home { width: min(460px, calc((100vw - 36px) / 1.5)); }
  .avatar { width: 92px; height: 92px; }
  .identity { margin-bottom: 32px; }
  .identity h1 { font-size: clamp(22px, 6.5vw, 27px); }
  .link-list > a, .projects > a { min-height: 60px; font-size: 16px; }
  .projects { margin-top: 16px; padding-top: 14px; }
}

@media (max-height: 700px) {
  .link-home { padding: 24px 0; }
  .identity { margin-bottom: 20px; }
  .avatar { width: 76px; height: 76px; margin-bottom: 14px; }
  .link-list { gap: 3px; }
  .link-list > a { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}