:root {
  color-scheme: dark;
  --color-background: #141414;
  --color-text: #eeeeeb;
  --color-muted: #a3a3a0;
  --color-button: rgb(255 255 255 / 6%);
  --color-button-text: #f5f2fa;
  --color-accent: #d9cef4;
  --glass-lilac: rgb(198 173 242 / 24%);
  --glass-blue: rgb(161 212 245 / 20%);
  --glass-pink: rgb(244 185 213 / 18%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --content-width: 960px;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
}

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-accent);
  color: var(--color-background);
}

.page {
  width: min(var(--content-width), calc(100% - 2 * var(--space-md)));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: grid;
  align-items: center;
  padding-block: calc(2 * var(--space-lg));
}

.intro {
  width: 100%;
}

.intro__header {
  margin-bottom: var(--space-lg);
}

h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.role {
  margin: calc(var(--space-sm) / 2) 0 0;
  color: var(--color-muted);
  font-size: 18px;
  letter-spacing: -0.015em;
}

.about {
  max-width: 650px;
  color: var(--color-muted);
  text-wrap: pretty;
}

.about p {
  margin: 0;
}

.about p + p {
  margin-top: var(--space-md);
}

.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: var(--color-button);
  color: var(--color-button-text);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 4px 16px rgb(0 0 0 / 16%);
  font: 500 15px / 1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms var(--ease-out), border-color 400ms ease;
}

/* Translucent colour sits beneath the text, independent of backdrop support. */
.contact::before {
  content: "";
  position: absolute;
  inset: -100% -50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 60%, var(--glass-lilac), transparent 55%),
    radial-gradient(ellipse at 75% 35%, var(--glass-blue), transparent 50%),
    radial-gradient(ellipse at 60% 85%, var(--glass-pink), transparent 50%);
  transform: translateX(-12%) rotate(-12deg);
  transition: transform 1200ms var(--ease-out);
}

.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 65%, rgb(255 135 155 / 55%), transparent 45%),
    radial-gradient(ellipse at 30% 35%, rgb(255 186 128 / 50%), transparent 42%),
    radial-gradient(ellipse at 42% 70%, rgb(255 235 150 / 45%), transparent 40%),
    radial-gradient(ellipse at 52% 30%, rgb(155 240 184 / 50%), transparent 42%),
    radial-gradient(ellipse at 65% 65%, rgb(143 221 255 / 55%), transparent 45%),
    radial-gradient(ellipse at 78% 35%, rgb(164 163 255 / 50%), transparent 42%),
    radial-gradient(ellipse at 90% 60%, rgb(225 160 255 / 55%), transparent 45%);
  filter: blur(10px);
  opacity: 0;
  transform: translate(-25%, 20%) scale(0.75);
}

.contact:focus-visible::before {
  transform: translateX(12%) rotate(12deg);
}

.contact:focus-visible::after {
  animation: rainbow-smoke 4200ms ease-in-out infinite;
}

@keyframes rainbow-smoke {
  0%, 100% {
    transform: translate(-25%, 20%) scale(0.75) rotate(-8deg);
    opacity: 0;
  }
  25% {
    transform: translate(-10%, 5%) scale(1) rotate(0deg);
    opacity: 0.85;
  }
  55% {
    transform: translate(10%, -10%) scale(1.3, 1.6) rotate(8deg);
    opacity: 0.65;
  }
  85% {
    transform: translate(25%, -30%) scale(1.7, 2) rotate(15deg);
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .contact:hover {
    transform: translateY(calc(var(--space-sm) / -6));
    border-color: rgb(255 255 255 / 32%);
  }

  .contact:hover::before {
    transform: translateX(12%) rotate(12deg);
  }

  .contact:hover::after {
    animation: rainbow-smoke 4200ms ease-in-out infinite;
  }
}

.contact:active {
  transform: scale(0.98);
}

.contact:active::before {
  transform: translateX(12%) rotate(12deg);
}

.contact:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: calc(var(--space-sm) / 2);
}

@media (max-width: 600px) {
  :root {
    --space-lg: 2rem;
  }

  body {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact,
  .contact::before,
  .contact::after {
    transition: none;
  }

  .contact:hover,
  .contact:active {
    transform: none;
  }

  .contact::before {
    transform: none !important;
  }

  .contact::after,
  .contact:hover::after,
  .contact:focus-visible::after {
    animation: none;
    transform: none;
    opacity: 0;
  }

  .contact:hover::after,
  .contact:focus-visible::after {
    opacity: 0.5;
  }
}