/* Import Geist Mono */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap');
/* Import Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


body {
  font-family: Uncut Sans, sans-serif;
  background-color: transparent;
}

/* Blog: matches docs canvas visibility - hint of grid at the very top,
   fully washed out by ~55% of the viewport. Decorative cyan header
   wash dropped (was making the canvas dimmer than docs). Overrides
   customization.css's body::before background-image; other props
   (position:fixed, inset, z-index, pointer-events, content) cascade. */
body::before {
  background-image: linear-gradient(
    to bottom,
    rgba(247, 248, 250, 0.3) 0%,
    rgba(247, 248, 250, 0.75) 30%,
    rgba(247, 248, 250, 1) 65%
  );
}

.blogcontent {
  font-family: Inter, sans-serif;
  max-width: 60em;
  font-weight: 300;
}

.blogcontent code {
  font-family: 'Geist Mono', monospace;
}

.blogcontent h1,
.blogcontent h2,
.blogcontent h3,
.blogcontent h4,
.blogcontent h5,
.blogcontent h6 {
  text-align: left;
}

.blogcontent p {
  hyphens: auto;
}

.blogcontent a {
  hyphens: auto;
  word-break: break-all;
}

.blogbody {
  max-width: 42em;
}

.blogbody p,
.blogbody li {
  line-height: 1.76rem;
}

.blogcontent img {
  max-width: 100%;
  padding: 1em 0em;
  border-radius: 1%;
}

.blogbody h2 {
  margin-top: 2rem;
}

.blogbody h3 {
  margin-top: 1.5rem;
}

#blogtitle {
  text-align: center;
  font-size: calc(2.4rem + 1.5vw);
}

blockquote {
  border-left: rgb(237, 237, 237) 3px solid;
  padding-left: 0.8rem;
}