@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/bebas-neue.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-600.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-700.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

html:root {
  --brand: 351 68% 38%;
  --brand-light: 352 72% 52%;
  --brand-h: 351;
  --brand-s: 68%;
  --brand-text: 351 72% 34%;
  --background: 40 20% 95%;
  --foreground: 345 10% 10%;
  --muted: 38 15% 89%;
  --muted-foreground: 25 7% 39%;
  --border: 25 12% 77%;
  --card: 40 24% 97%;
  --card-foreground: 345 10% 10%;
  --radius: 0.25rem;
  --site-font-body: 'IBM Plex Sans', sans-serif;
  --site-font-heading: 'Bebas Neue', sans-serif;
}

html.dark {
  --brand: 351 70% 43%;
  --brand-light: 352 78% 59%;
  --brand-h: 351;
  --brand-s: 70%;
  --brand-text: 352 78% 66%;
  --background: 345 9% 6%;
  --foreground: 40 24% 94%;
  --muted: 345 8% 12%;
  --muted-foreground: 28 9% 65%;
  --border: 345 8% 22%;
  --card: 345 9% 9%;
  --card-foreground: 40 24% 94%;
}

body {
  background-image:
    linear-gradient(118deg, transparent 0 72%, hsl(var(--brand) / 0.035) 72% 73%, transparent 73%),
    linear-gradient(hsl(var(--foreground) / 0.018) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 7px;
}

::selection {
  background: hsl(var(--brand));
  color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

.prose h2,
.prose h3 {
  color: hsl(var(--foreground));
}

.prose h2 {
  border-left: 4px solid hsl(var(--brand));
  padding-left: 0.75rem;
}

.card {
  box-shadow: 6px 6px 0 hsl(var(--border) / 0.42);
}