:root {
  --brand: #5868e9;
  --brand-text: #7986ed;
  --brand-bg: rgba(88, 104, 233, 0.2);
  --brand-hover: rgba(88, 104, 233, 0.5);
  --app-bg: #0a0c0f;
  --text-1: #ffffff;
  --text-2: #a1abb9;
  --text-3: #828997;

  --surface-1: #1b202c;
  --surface-2: #252b37;

  --border: #1f2733;

  --shadow-1: 0px 3px 26px rgba(0, 0, 0, 0.67);
}

html {
  /* Adjust font size */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;

  /* Smoothing */
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'zero' on, contextual common-ligatures, 'kern', contextual common-ligatures, 'kern';
  -webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'zero' on;
  font-variant-ligatures: contextual common-ligatures;
  -webkit-font-kerning: normal;
  font-kerning: normal;

  overflow-x: hidden;
}

@media only screen and (min-width: 768px) {
  body:before {
    content: '';
    z-index: -1;
    position: absolute;
    width: 1200px;
    height: 800px;
    right: -750px;
    top: 50px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(74, 39, 74, 0.74) 0%, rgba(76, 38, 73, 0) 100%);
    opacity: 0.7;
  }

  body:after {
    content: '';
    z-index: -1;
    position: absolute;
    width: 1200px;
    height: 800px;
    left: -750px;
    top: -50px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(40, 94, 176, 0.41) 0%, rgba(6, 19, 31, 0) 100%);
    opacity: 0.7;
  }
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

  color: var(--text-1);
  background-color: var(--app-bg) !important;
  overflow-x: hidden;
}

.articleFoot p,
.articleFoot time {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}

a {
  color: var(--brand-text);
  text-decoration: none !important;
}

#docsSearch {
  background-color: transparent !important;
  border: none;
  padding: 72px 0;
  border-bottom: 1px solid #ffffff14;
}

#docsSearch > h1 {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.021em;
  line-height: 1.25;
  color: rgb(255, 255, 255);
  text-shadow: rgb(255 255 255 / 30%) 0px 0px 12px;
  margin: 0;
  padding: 0;
  margin-bottom: 32px;
}

.brand > img {
  max-height: 18px;
  width: auto;
}

#searchBar {
  padding: 0;
}

#searchBar > button {
  top: 0;
  right: 0;
  border: none;
  text-shadow: none;
  background-color: var(--brand);
  height: auto;
  bottom: 0;
  padding: 0 40px;
  border-left: 1px solid #ffffff21;
}

#searchBar > button:hover {
  background-color: var(--brand-hover);
}

#searchBar > .search-query {
  background-color: #0000004d;
  border: 1px solid #ffffff21;
  padding: 24px;
  height: auto;
  color: var(--text-1);
}

#searchBar > .search-query::placeholder {
  color: var(--text-3);
}

* {
  transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.navbar .navbar-inner {
  background-color: var(--app-bg);
  padding: 4px 0;
}

.most-pop-articles h2 {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: rgb(255, 255, 255);
  text-shadow: rgb(255 255 255 / 30%) 0px 0px 12px;
  margin: 16px 0px 40px 0;
  padding: 0;
}

hr.sep {
  display: none;
}

.category-list .category {
  background-color: var(--surface-1);
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 50px 0;
  width: 100%;
}

.category-list .category:hover {
  background-color: var(--brand-bg);
  text-decoration: none;
}

.category-list h3 {
  font-weight: 500;
  color: var(--brand-text);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 6px;
  line-height: 1;
  margin: 0 0 8px 0;
}

.category-list .article-count {
  color: white !important;
  margin: 0;
}

.category-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.popArticles a {
  color: var(--text-1) !important;
}

.popArticles a:hover {
  color: var(--brand-text) !important;
}

.contentWrapper {
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  font-size: 18px;
  line-height: 1.6;
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
  font-weight: 800;

  letter-spacing: -0.021em;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  margin-bottom: 32px;
}

.contentWrapper h1 {
  font-size: 30px;
}

#categoryHead h1 {
  font-size: 30px;
  font-weight: 800;

  letter-spacing: -0.021em;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  margin-bottom: 32px;
}

#sidebar h3 {
  color: var(--brand-text);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  color: var(--text-1);
}

#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
  text-decoration: none;
  background: none;
  color: white;
  text-shadow: none;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: #0a0c0f;
}

.articleList li a {
  font-weight: 400;
  letter-spacing: -0.021em;
  line-height: 1.45;
  font-size: 24px;
}

.articleList li a:hover {
  color: var(--brand);
  text-decoration: none !important;
}

.related {
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  background-color: var(--surface-1);
  border: none;
  margin-top: 24px;
}

.related h3 {
  color: var(--brand-text);
}

.related ul > li a {
  color: var(--text-1) !important;
}

#searchBar.sm button {
  height: auto;
}

#sidebar form .search-query {
  border: 1px solid #ffffff26;
  background-color: #ffffff17;
  color: white;
}