@font-face {
  font-family: "SF Pro";
  src: url("./fonts/SF-Pro.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "SF Mono";
  src: url("./fonts/SF-Mono-Regular.otf") format("opentype");
  font-style: normal;
}

:root {
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* clamp(min, pref, max) */
  --font-size-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.938rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.063rem);
  --font-size-lg: clamp(1.125rem, 1.063rem + 0.313vw, 1.25rem);
  --font-size-xl: clamp(2.5rem, 3vw, 4.5rem);

  --base: #1e1e2e;
  --text: #cdd6f4;
  --blue: #89b4fa;
  /* sub-headlines, labels */
  --subtext-0: #a6adc8;
  /* subtle */
  --overlay-1: #7f849c;
  /* copy button hover for code block */
  --surface-0: #313244;
}

body {
  display: flex;
  flex-direction: column;
  width: 72ch;
  margin: 0 auto;
  background-color: var(--base);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 112ch) {
  body {
    width: 90%;
  }
}

@media (max-width: 300px) {
  body {
    word-break: break-all;
  }
}

header > h1 > a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--font-size-xl);
}

header > nav > ul {
  display: flex;
  list-style-type: none;
  column-gap: 0.8rem;
  padding-left: 0;
  font-family: "SF Mono";
}

nav > ul > li > a {
  color: var(--subtext-0);
  font-size: var(--font-size-sm);
}

nav > ul {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  column-gap: 0.15rem;
}

a {
  color: var(--blue);
  text-decoration: underline;
}

p,
li,
ul,
ol {
  font-size: var(--font-size-base);
}

ul {
  padding-inline-start: 1.2rem;
  flex-wrap: wrap;
}

li {
  padding-bottom: 0.25rem;
}

pre {
  position: relative;
  border-radius: 0.5rem;
  padding: 2rem 1rem;
}

code {
  display: block;
  overflow-x: auto;
  font-family: "SF Mono";
}

hr {
  border-top: 0.05rem solid var(--overlay-1);
}

.invisible {
  display: none;
}

#social-links > a {
  cursor: pointer;
  padding: 0.25rem;
  text-decoration: none;
}

#social-links {
  padding-bottom: 3rem;
}