html {
	/* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
	--primary-color: #1779c4;
	--primary-dark-color: #f73e00;
	--primary-light-color: #70b1e9;
	--on-primary-color: #fff6ca;

	/* page base colors */
	--page-background-color: #fff6ca;
	--page-foreground-color: #2f4153;
	--page-secondary-foreground-color: #6f7e8e;

	/* color for all separators on the website: hr, borders, ... */
	--separator-color: #a7a7a7;

	/* sidebar navigation (treeview) colors */
	--side-nav-background: #324067;
	--side-nav-foreground: #fff5cf;
	--header-foreground: var(--side-nav-foreground);
	--header-background: var(--side-nav-background);
	--side-nav-arrow-opacity: 0;
	--side-nav-arrow-hover-opacity: 0.9;
	--searchbar-background: var(--side-nav-foreground);
	--searchbar-border-radius: var(--border-radius-medium);
	--toc-background: rgb(243, 240, 252);
	--toc-foreground: var(--page-foreground-color);

	/* searchbar size
	 * (`searchbar-width` is only applied on screens >= 768px.
	 * on smaller screens the searchbar will always fill the entire screen width) */
	--searchbar-height: 33px;
	--searchbar-width: 210px;
	--searchbar-border-radius: var(--searchbar-height);

	/* code block colors */
	--code-background: #fffce9;
	--code-foreground: var(--page-foreground-color);

    /*--toc-width: 200px;*/

	/* blockquote colors */
	--blockquote-background: #fffce9;
	--blockquote-foreground: #a7a7a7;

	/* fragment colors */
	--fragment-background: #fffce9;
	--fragment-foreground: #37474F;
	--fragment-keyword: #bb6bb2;
	--fragment-keywordtype: #8258b3;
	--fragment-keywordflow: #c64a34;
	--fragment-token: #397564;
	--fragment-comment: #969696;
	--fragment-link: #5383d6;
	--fragment-preprocessor: #42749f;
	--fragment-linenumber-color: #797979;
	--fragment-linenumber-background: #f4f4f5;
	--fragment-linenumber-border: #e3e5e7;
	--fragment-lineheight: 20px;

    --side-nav-fixed-width: 250px;
}

html.dark-mode {
	--primary-color: #1982d2;
	--primary-dark-color: #fe9700;
	--primary-light-color: #4779ac;
	--page-background-color: #151821;
	--page-foreground-color: #d2dbde;
	--page-secondary-foreground-color: #859399;
	--separator-color: #38393b;
	--side-nav-background: #1f2430;
	--side-nav-foreground: #d2dbde;
    --code-background: #363a45;

	/*--fragment-background: #282c34;*/
	--fragment-background: #1f2430;
	--fragment-foreground: #dbe4eb;
	--fragment-keyword: #cc99cd;
	--fragment-keywordtype: #ab99cd;
	--fragment-keywordflow: #f81e16;
	--fragment-token: #54ff54;
	--fragment-comment: #62778a;
	--fragment-link: #98c0e3;
	--fragment-preprocessor: #53fecd;
	--fragment-linenumber-color: #cccccc;
	--fragment-linenumber-background: #35393c;
	--fragment-linenumber-border: #1f1f1f;

	--header-background: var(--page-background-color);
	--header-foreground: var(--page-foreground-color);
	--searchbar-background: #151821;
	--searchbar-foreground: var(--page-foreground-color);
	--toc-background: var(--side-nav-background);
	--toc-foreground: var(--side-nav-foreground);
}

.gitrepo-corner svg {
	fill: var(--primary-light-color);
	color: var(--page-background-color);
	width: 50px;
	height: 50px;
}