:root {
  --bg: #f2f4f6;
  --text: #11151a;
  --muted: #69727c;
}

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

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  text-transform: lowercase;
  background: var(--bg);
}

::selection {
  background: #d8dee5;
}

.page {
  padding: 2rem 1.5rem 3rem;
}

.panel {
  width: min(100%, 56rem);
  display: grid;
  gap: 1rem;
}

.name {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.copy {
  margin: 0;
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

.note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 640px) {
  .page {
    padding: 1.5rem 1.25rem 2rem;
  }
}