/* Body */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
}

@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-display: swap;
  src: url("/fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 100 900;
}

/* Mono */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
  font-weight: 400;
}

:root {
  /* Fonts */
  --body: "Inter Variable", sans-serif;
  --monospace: "IBM Plex Mono", monospace;

  --text: rgb(250 250 250);
  --text-2: rgb(215 200 220);

  --background: rgb(30 23 40);
  --background-2: rgb(36 28 46);
  --accent-dark: rgb(55 45 70);
}

/* CSS Reset - Josh W. Comeau */

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

* {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

/* Typography */

h1 {
  font-variation-settings: 'wdth' 85;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-size: 1.25rem;
  line-height: 1.25em;
}

p {
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  display: inline-block;
  color: var(--text);
  font-weight: 600;
}

a:hover,
a:focus-visible {
  color: var(--text-2);
}

code {
  font-family: var(--monospace);
  background-color: var(--background);
  outline: 1px solid var(--accent-dark);
  padding-inline: 0.125em;
}

/* Page elements */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--background-2);
  color: var(--text);
  min-block-size: 100svb;
}

main {
  padding: 3rem;
  max-inline-size: 67ch;
}

main > * + * {
  margin-block-start: 1.25em;
}

.site-title svg {
  block-size: 34px;
}

.gifs img {
  image-rendering: pixelated;
}