html {
  --scrollbarBG: #23192d;
  --thumbBG: #f57576;
  --brand-color: #ef3340;
}
body {
  min-height: 1vh;
  background-color: rgb(248, 248, 248);
  color: #23192d;
}

h1 {
  font-size: clamp(36px, 8vw, 50px) !important;
  line-height: 1.1 !important;
  font-weight: bold;
}

h2 {
  font-size: clamp(22px, 4vw, 30px) !important;
  line-height: 1.3 !important;
}

.categories {
  color: #fd0a54;
}

.snippet-container {
  transition: all 0.4s ease-in-out;
}

pre {
  border-radius: 0 0 0.75rem 0.75rem;
}

code {
  display: block;
  min-width: 100%;
  width: 0px;
  overflow: auto; /* Or scroll */
  padding: 20px;
  border-radius: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
code::-webkit-scrollbar {
  width: 11px;
}

code::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

code::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

.hide-snippet {
  display: none;
}

/* visit links */
.visit-link {
  color: white;
  background-color: #ef3340;
  padding: 10px 20px;
  margin-top: 10px;
  display: inline-block;
}

/* auto completye overwrites */
.autoComplete_wrapper {
  display: block;
}

.autoComplete_wrapper > input,
input[type='password'] {
  width: 100%;
  color: #23192d !important;
  border-color: #4a4a4a;
}

.active-cat {
  color: var(--brand-color) !important;
}

.active-cat-container {
  border: 1px solid var(--brand-color) !important;
}