/* Style for rendered Markdown */

:root {
  --ctp-mocha-rosewater: #f5e0dc;
	--ctp-mocha-flamingo: #f2cdcd;
	--ctp-mocha-pink: #f5c2e7;
	--ctp-mocha-mauve: #cba6f7;
	--ctp-mocha-red: #f38ba8;
	--ctp-mocha-maroon: #eba0ac;
	--ctp-mocha-peach: #fab387;
	--ctp-mocha-yellow: #f9e2af;
	--ctp-mocha-green: #a6e3a1;
	--ctp-mocha-teal: #94e2d5;
	--ctp-mocha-sky: #89dceb;
	--ctp-mocha-sapphire: #74c7ec;
	--ctp-mocha-blue: #89b4fa;
	--ctp-mocha-lavender: #b4befe;
	--ctp-mocha-text: #cdd6f4;
	--ctp-mocha-subtext1: #bac2de;
	--ctp-mocha-subtext0: #a6adc8;
	--ctp-mocha-overlay2: #9399b2;
	--ctp-mocha-overlay1: #7f849c;
	--ctp-mocha-overlay0: #6c7086;
	--ctp-mocha-surface2: #585b70;
	--ctp-mocha-surface1: #45475a;
	--ctp-mocha-surface0: #313244;
	--ctp-mocha-base: #1e1e2e;
	--ctp-mocha-mantle: #181825;
	--ctp-mocha-crust: #11111b;
  --white: #D9E0EE;
  --black: #000000;
  --light: #C9CFFF;
  --lighter-grey: #C3BAC6;
  --light-grey: #988BA2;

	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
  --font-mono: "Roboto Mono", Courier, monospace;
  --font-size: 13px;
  --icon-size: 16px;

  --regular: 400;
  --bolder: 600;

  --scroll-radius: 3px;

  --opacity-0-8: 0.8;
}

body, th, td {
  background-color: var(--ctp-mocha-base) !important;
  font-family: var(--font-face) !important;
}

p, ul, ol, li {
  color: var(--ctp-mocha-text) !important;
}

strong {
  color: var(--ctp-mocha-text) !important;
}

hr {
  border: none;
  border-bottom: 1px solid var(--ctp-mocha-overlay1) !important;
  margin: 2.5em 0 !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb {
  background-color: var(--ctp-mocha-base) !important;
  border-radius: var(--scroll-radius) !important;
}

/*********************************************************************************
* TITLES
*********************************************************************************/

h1 {
  color: var(--ctp-mocha-text);
  border-bottom: 1px solid var(--ctp-mocha-base) !important;
  font-weight: var(--bolder) !important;
  font-size: 2rem !important;
  margin: 1rem 0;
}

h2, h3, h4, h5, h6 {
  color: var(--ctp-mocha-subtext1);
  border-bottom: 0 !important;
  font-weight: var(--regular) !important;
  margin: 1rem 0;
}

/*********************************************************************************
* LINKS
*********************************************************************************/

a {
  color: var(--ctp-mocha-blue) !important;
  text-decoration: underline !important;
}

a:hover {
  text-decoration: underline !important;
}

/*********************************************************************************
* CODE BLOCK
*********************************************************************************/

pre, .hljs {
  background-color: var(--ctp-mocha-mantle) !important;
  font-family: var(--font-mono) !important;
  padding: 10px !important;
  margin: 1rem;
  color: var(--ctp-mocha-text) !important;
  font-size: 14px !important;
  overflow: scroll !important;
}

/* Inline code */
:not(pre) > code, .inline-code {
  background-color: transparent !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  color: var(--ctp-mocha-flamingo) !important;
  font-size: 16px !important;
}

/*********************************************************************************
* BLOCKQUOTE
*********************************************************************************/

blockquote {
  background-color: var(--ctp-mocha-surface0) !important;
  padding: 10px !important;
  color: var(--light) !important;
  font-size: 14px !important;
  font-style: italic !important;
  border: 0 !important;
  border-left: 5px solid var(--ctp-mocha-mantle) !important;
}

/*********************************************************************************
* TABLES
*********************************************************************************/

th {
  border: 1px solid var(--ctp-mocha-text) !important;
  color: var(--ctp-mocha-text) !important;
  border-bottom: 1px solid var(--ctp-mocha-text) !important;
}

td {
  border: 1px solid var(--ctp-mocha-text) !important;
  color: var(--ctp-mocha-text) !important;
  border-bottom: 1px solid var(--ctp-mocha-text) !important;
}

/*********************************************************************************
* HIGHLIGHTING
*********************************************************************************/

::selection {
	background-color: var(--ctp-mocha-lavender) !important;
  color: var(--ctp-mocha-crust) !important;
}

mark, mark strong {
  background: var(--ctp-mocha-yellow) !important;
  color: var(--ctp-mocha-crust) !important;
}

/* Highlighted searched item */
mark[data-markjs] {
  background-color: var(--ctp-mocha-lavender) !important;
}