@import url("https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap");
@import url("base.css");

:root {
  --color-text: var(--color-zinc-300);
  --color-bg: var(--color-zinc-900);
}

body {
  margin: 5rem auto;

  font-family: Petrona, serif;
  letter-spacing: 0.025em;
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-style: dotted;

  &:hover {
    color: white;
  }
}

h1 {
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  margin-top: 3rem;
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  margin-top: 2rem;
}

p {
  margin-top: 1.5rem;
}

/* Custom */

.project + p {
  margin-top: 0.5rem;
}

.project + p + p {
  margin-top: 0.5rem;
}

.link + .link {
  margin-left: 1rem;
}