global.css

@font-face {
  font-family:"Cardamon";
  font-display: swap;
  src: url("./fonts/4342086f-c89b-45ba-85ed-34e11a4d87a6.woff2") format("woff2"),
       url("./fonts/e0b984a3-3616-45a2-a5e3-c99ba058c67a.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Cardamon";
  font-display: swap;
  src: url("./fonts/4c900f97-8a6f-475d-970c-f666966acd06.woff2") format("woff2"),
       url("./fonts/a486d579-df72-4b72-acad-7d92e32d8033.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Cardamon";
  font-display: swap;
  src: url("./fonts/e0d095f6-0ed8-44ce-95f9-ccaea796f999.woff2") format("woff2"),
       url("./fonts/27b98cbb-80d3-440c-8b18-da47eb7f538a.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family:"Cardamon Small Caps";
  font-display: swap;
  src: url("./fonts/dcaaf14a-5b49-4cc8-bcfa-49836ba81ea4.woff2") format("woff2"),
       url("./fonts/7fc61bc4-c834-48cb-901c-26753ebde30c.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family:"Input";
  font-display: swap;
  src: url("./fonts/Input-Regular.woff2") format("woff2"),
       url("./fonts/Input-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

:root {
  /* 1rem = 1p = 12pt*/
  /* leads */
  --u-1p: 0.083rem;
  --u-2p: 0.166rem;
  --u-3p: 0.25rem;
  --u-6p: 0.5rem;

  /* type sizes*/
  --s-8:  0.666rem;
  --s-10: 0.833rem;
  --s-12: 1rem;
  --s-14: 1.166rem;
  --s-18: 1.5rem;
  --s-20: 1.666rem;
  --s-24: 2rem;
  --s-28: 2.333rem;     
};

html {
  --bg-color: #fafafa;
  --txt-color: #2a2a2e;
  --code-bg: #eee;
  --pink: rgb(249,118,126);
  font-size: clamp(18px, 1.7vw, 28px);
}

.invert {
  --bg-color: #191919;
  --txt-color: #fafafa;  
  --pink: rgb(235, 181, 190);
  --code-bg: #2a2a2e;
}

@media screen and (prefers-color-scheme: dark) {
  html {
    --bg-color: #191919;
    --txt-color: #fafafa;  
    --code-bg: #2a2a2e;
    --pink: rgb(235, 181, 190);
    font-size: clamp(18px, 1.7vw, 28px);
  } 
  .invert {
    --bg-color: #fafafa;
    --txt-color: #2a2a2e;
    --pink: rgb(249,118,126);
    --code-bg: #eee;
  }
}

body {
	margin: 0;
	font-family: Cardamon, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-size: var(--s-12);
	line-height: calc(1em + 0.75rem);
  letter-spacing: 0.5px;
	background-color: var(--bg-color);
	color: var(--txt-color);
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

h1,h2,h3,h4,h5,h6 {
  font-size: var(--s-12);
  line-height: calc(1em + 0.75rem);
  margin: 0;
}

h1 {
  font-size: var(--s-28);
  margin-bottom: 5rem;
}
h2 {
  font-size: var(--s-20); 
  margin-top: 2rem;
}
h3 {
  font-size: var(--s-14); 
}

pre {
  max-width: 100%;
  overflow: scroll;
  background-color: var(--code-bg);
  padding: 1rem;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
code {
  font-family: 'Input';
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 300ms ease-in-out, border-color 300ms ease-in-out;
  border-bottom: 2px solid var(--txt-color);
}
a:hover {
  transition: color 300ms ease-in-out, border-color 300ms ease-in-out;
  color: var(--pink);
  border-color: var(--pink);
}

a:focus {
  transition: color 300ms ease-in-out;
  color: var(--pink);
}

figure {
  margin: 0;
}

img {
  width: 100%;
  max-width: 100%;
}
img.lazyload {
  image-rendering: pixelated;
  filter: grayscale(1);
}
img.lazyloaded {
  filter: grayscale(0); 
  image-rendering: auto;
}

date {
  font-size: var(--s-10);
  font-family: 'Input';
}

blockquote {
  border-left: 1px solid var(--txt-color);
  margin: 0;
  padding-left: 2rem;
  font-style: italic;
}