@font-face {
  font-family: "jf-openhuninn-2.1";
  font-style: normal;
  font-stretch: normal;
  src: url("./fonts/jf-openhuninn-2.1.woff2");
}

@font-face {
  font-family: "AiC-alphabets";
  font-style: normal;
  font-stretch: normal;
  src: url("./fonts/AiC-alphabets.woff2");
}

:root {
  --ct-text-size: 16px;
  --ct-line-height: 1.6;
  --ls-font-family: "Only Emoji", "jf-openhuninn-2.1",
    sans-serif;
  --ct-page-title-font-family: var(--ls-font-family);
  --ct-code-font-family: "Fira Code", monospace;
}

#main-container{
	background-image:url("../img/aicbg.webp");
	background-repeat:no-repeat;
	background-size: cover;
}

#main-content-container {
	background: var(--ct-content-background);
}

iframe[id^="youtube-player"] {
  aspect-ratio: 16/9; !important;
  width: 100% !important;
  height: auto !important;
}

mark {
  font-family: "AiC-alphabets", "jf-openhuninn-2.1";
  background: transparent;
  padding: 0;
  color: var(--ls-primary-text-color);
  font-size: inherit;
  text-decoration-style: solid;
  text-decoration: none;
  text-decoration-skip-ink: none;
}

:root {
  --ct-background: var(--ls-primary-background-color);
  --ct-page-font-color: var(--ls-primary-text-color);
}

:root {
  --ct-page-title-color: var(--ct-bold-color);
  --ct-page-title-font-size: 36px;
  --ct-page-title-line-height: 40px;
  --ct-page-title-font-weight: 300;
  --ct-page-title-font-style: normal;
  --ct-heading-font-family: var(--ct-page-title-font-family);
  --ct-heading-font-size: 25px;
  --ct-heading-font-weight: 700;
  --ct-heading-font-style: normal;
  --ct-header-height: calc(var(--ls-headbar-height) + var(--ls-headbar-inner-top-padding));
  --ct-topbar-backdrop: blur(20px);
}

/* Heading & Page title */
h1.title {
  margin-top: 8px;
  font-family: var(--ct-page-title-font-family);
  font-size: var(--ct-page-title-font-size);
  font-weight: var(--ct-page-title-font-weight);
  font-style: var(--ct-page-title-font-style);
  color: var(--ct-page-title-color);
  line-height: var(--ct-page-title-line-height);
  text-shadow: var(--ct-page-title-text-shadow, none);
}

a.title h1.title {
  margin-top: 0;
  text-shadow: var(--ct-page-title-text-shadow, none);
}

.ls-block h2 {
  font-family: var(--ct-heading-font-family);
  font-weight: var(--ct-heading-font-weight);
  font-style: var(--ct-heading-font-style);
  color: var(--ct-heading-color);
  text-shadow: var(--ct-heading-text-shadow, none);
}

.cp__header::after,
.cp__right-sidebar-topbar::after {
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  position: absolute;
  top: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  display: block;
  content: "";
}

.cp__header.electron-mac {
  height: var(--ct-header-height);
}


.dark-theme,
html[data-theme=dark] {
  --ct-primary-color: #61efff;
  --ct-secondary-color: #6096ba;
  --ct-warning-color: #ff7262;
  --ct-success-color: #0dcf82;
  --ct-highlight-color: #d3a400;
  --color-level-1: #313942;
  --color-level-2: #38434c;
  --color-level-3: #404b55;
  --color-level-4: #525f6b;
  --color-level-5: #606e7a;
  --color-level-6: #697885;
  --ls-primary-background-color: #272c35;
  --ls-secondary-background-color: var(--color-level-1);
  --ls-tertiary-background-color: var(--color-level-2);
  --ls-quaternary-background-color: var(--color-level-3);
  --ls-border-color: var(--ls-tertiary-background-color);
  --ls-table-tr-even-background-color: var(--ls-secondary-background-color);
  --ls-primary-text-color: rgb(235, 235, 235);
  --ls-secondary-text-color: rgb(200, 200, 200);
  --ct-bold-color: #fff;
  --ls-link-text-color: var(--ct-primary-color);
  --ls-link-ref-text-color: var(--ct-primary-color);
  --ls-link-ref-text-hover-color: var(--ct-secondary-color);
  --ls-active-primary-color: var(--ct-primary-color);
  --ls-active-secondary-color: var(--ct-secondary-color);
  --ls-external-link-color: var(--ct-secondary-color);
  --ls-guideline-color: var(--ls-tertiary-background-color);
  --ls-block-bullet-color: var(--ls-tertiary-background-color);
  --ls-bullet-closed-color: var(--ls-secondary-text-color);
  --ls-block-bullet-border-color: var(--ls-quaternary-background-color);
  --ct-block-arrow-color: rgb(165, 165, 165);
  --ct-page-reference-color: var(--ls-active-primary-color);
  --ls-icon-color: var(--ls-primary-text-color);
  --ct-block-reference-background: rgba(16, 107, 163, 0.2);
  --ct-block-reference-background-hover: rgba(16, 107, 163, 0.3);
  --ls-page-properties-background-color: var(--ls-tertiary-background-color);
  --ls-scrollbar-foreground-color: var(--ls-secondary-background-color);
  --ct-header-bg-color: #272c35ee;
  --ls-selection-color: #000;
  --ls-block-highlight-color: #32445a;
  --ct-content-background: radial-gradient(ellipse, #0008, #0000);
}

.white-theme,
.light-theme,
html[data-theme=light],
html[data-theme=white] {
  --ct-primary-color: #106ba3;
  --ct-secondary-color: #004174;
  --ct-warning-color: #ff7262;
  --ct-success-color: #0dcf82;
  --ct-highlight-color: #ffc600;
  --color-level-1: #f8f9fa;
  --color-level-2: #e9ecef;
  --color-level-3: #dee2e6;
  --color-level-4: #b9bcbe;
  --color-level-5: #aaaeb4;
  --color-level-6: #9da2a8;
  --ls-primary-background-color: #ffffff;
  --ls-secondary-background-color: var(--color-level-1);
  --ls-tertiary-background-color: var(--color-level-2);
  --ls-quaternary-background-color: var(--color-level-3);
  --ls-border-color: var(--ls-tertiary-background-color);
  --ls-table-tr-even-background-color: var(--ls-secondary-background-color);
  --ls-primary-text-color: rgb(130, 130, 130);
  --ls-secondary-text-color: #161e2e;
  --ct-bold-color: #000;
  --ls-link-text-color: var(--ct-primary-color);
  --ls-link-ref-text-color: var(--ct-primary-color);
  --ls-link-ref-text-hover-color: var(--ct-secondary-color);
  --ls-active-primary-color: var(--ct-primary-color);
  --ls-active-secondary-color: var(--ct-secondary-color);
  --ls-external-link-color: var(--ct-secondary-color);
  --ls-guideline-color: var(--ls-tertiary-background-color);
  --ls-block-bullet-color: var(--ls-tertiary-background-color);
  --ls-bullet-closed-color: var(--ls-secondary-text-color);
  --ls-block-bullet-border-color: var(--ls-quaternary-background-color);
  --ct-block-arrow-color: rgb(98, 98, 98);
  --ct-page-reference-color: var(--ls-active-primary-color);
  --ls-icon-color: var(--ls-primary-text-color);
  --ct-block-reference-background: rgba(16, 107, 163, 0.1);
  --ct-block-reference-background-hover: rgba(16, 107, 163, 0.3);
  --ls-page-properties-background-color: var(--ls-secondary-background-color);
  --ls-selection-color: #fff;
  --ct-header-bg-color: rgba(255, 255, 255, 0.9);
  --ct-content-background: radial-gradient(ellipse, #FFF8, #FFF0);
}