:root {
  --ink: #0b0a0d;
  --lime: #d6f92b;
  --text: #d8d5d0;
  --dim: #6d6a66;
  --muted: #8f8c88;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  margin: 0;
  padding: clamp(20px, 5vw, 64px);
  overflow-x: hidden;
  background: var(--ink);
  color: var(--text);
  font: 14px/1.85 var(--mono);
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px);
}

main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 78ch;
  margin: 0 auto;
}

h1 {
  --d: .05s;
  margin: 0 0 6px;
  color: #fff;
  font: 700 clamp(30px, 7vw, 52px)/1.05 var(--mono);
  letter-spacing: -.02em;
}

h1 em {
  padding: 0 .18em;
  background: var(--lime);
  color: var(--ink);
  font-style: normal;
}

.role {
  --d: .15s;
  margin: 0 0 26px;
  color: var(--dim);
}

.command-line {
  white-space: nowrap;
}

.prompt {
  color: var(--lime);
}

.home {
  color: var(--dim);
}

.command {
  color: #fff;
}

.output {
  margin: 2px 0 26px;
}

.project {
  --d: 1s;
  display: grid;
  grid-template-columns: 2.5ch 1fr auto;
  gap: 0 1.5ch;
  align-items: baseline;
  margin: 0 -8px;
  padding: 3px 8px;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
}

.marker {
  color: var(--lime);
}

.name {
  color: #fff;
  font-weight: 700;
}

.meta {
  color: var(--dim);
  white-space: nowrap;
}

.project:hover,
.project:focus-visible {
  outline: none;
  background: var(--lime);
  color: var(--ink);
}

.project:hover .marker,
.project:hover .name,
.project:hover .meta,
.project:focus-visible .marker,
.project:focus-visible .name,
.project:focus-visible .meta {
  color: var(--ink);
}

.tagline {
  --d: 1.1s;
  padding-left: 4ch;
  color: var(--muted);
}

.legal {
  --d: 1.2s;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5ch;
  padding-left: 4ch;
}

.legal + .project {
  margin-top: 1em;
}

.link {
  border-bottom: 1px dashed rgba(214, 249, 43, .4);
  color: var(--lime);
  text-decoration: none;
}

.link:hover,
.link:focus-visible {
  outline: none;
  border-color: transparent;
  background: var(--lime);
  color: var(--ink);
}

.contacts {
  --d: 1.9s;
  display: grid;
  grid-template-columns: 8ch 1fr;
  gap: 0 1ch;
}

.contacts dt {
  color: var(--dim);
}

.contacts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.caret {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  vertical-align: -2px;
  background: var(--lime);
}

.projects-command {
  --d: .5s;
}

.contacts-command {
  --d: 1.45s;
}

.language-command {
  --d: 2.1s;
}

.language-output {
  --d: 2.5s;
}

.prompt-line {
  --d: 2.7s;
}

@media (max-width: 560px) {
  body {
    align-items: flex-start;
  }

  .project {
    grid-template-columns: 2.5ch 1fr;
  }

  .meta {
    grid-column: 2;
  }

  .tagline,
  .legal {
    padding-left: 2.5ch;
  }

  .contacts {
    grid-template-columns: 9ch 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-animated .command-line {
    clip-path: inset(0 100% 0 0);
    animation: type .5s steps(18) both var(--d, 0s);
  }

  .is-animated .fade {
    opacity: 0;
    animation: fade .45s ease-out both var(--d, 0s);
  }

  .is-animated .caret {
    animation: blink 1.05s steps(1) infinite;
  }

  @keyframes type {
    to {
      clip-path: inset(0 -.2ch 0 0);
    }
  }

  @keyframes fade {
    to {
      opacity: 1;
    }
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
}