body {
  background-color:#131313;
  color: #f8f8f8;
  font-size:18px;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


body:before {
  content: "";
  display: block;
  background-image: url(/assets/noise.webp);
  opacity: .21;
  background-repeat: repeat;
  background-size: 257px auto;
  position: fixed;
  /* mix-blend-mode:screen; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 99999998;
}

.navbar-nav {
  --bs-nav-link-padding-y:0.3rem;
  --bs-navbar-nav-link-padding-x:0.8rem;
}
nav[data-bs-theme="dark"] .nav-item a {
  display: flex;
  align-items:center;
  transition: background-color .3s, color .2s ease;
}
nav[data-bs-theme="dark"] .nav-item a:hover {
  background-color: #232125;
  color: #f9f9f9;
}

.key-features .card h2 {
  color:var(--bs-gray-400);
}
.key-features .card {
  color:rgba(255,255,255,.7);
  border: 0;
/*  border: 1px rgba(255,255,255,.05) solid;*/
}

.key-features .card p.h6.text-uppercase {
  letter-spacing: 4px;
  font-weight: 300;
  color: #666;
}
.CodeMirror * {
  font-size: 15px;
}

pre.CodeMirror-line {
  font-family: "CommitMono", monospace;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03", "ss04", "ss05", "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11" 0;
}

.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 {
  color: #afafaf;
}

.cm-s-dracula .CodeMirror-gutters, .cm-s-dracula.CodeMirror {
  background-color: #080808 !important;
  padding: 10px;
}

.cm-s-dracula span.cm-keyword {
  color:#79ffa2;
}

.cm-s-dracula .cm-builtin {
  color:#e34068;
}

.code-preview-tabs li.nav-item button:hover {
  background-color: inherit;
  color: black;
}


.marquee--inner {
  width: fit-content;
  display: flex;
  flex: auto;
  flex-direction: row;
  -webkit-font-smoothing: antialiased;
}

.marquee--inner .marquee--part {
  flex-shrink: 0;
  padding: 0 4px;
  font-smooth: always;
  margin: 0
}


.animate-pulse {
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}