@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800');

@import url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css');

body {
	--radius-s: 0.125em;
	--radius-m: 0.25em;
	--radius-l: 0.375em;
	--input-radius: 0px;
	--tab-radius-active: 0px;
	--checkbox-radius: 0px;
	--toggle-radius: 0px;
	--toggle-thumb-radius: 0px;
	--slider-thumb-radius: 0px;
	--accent-color: rgb(216 110 23);
	--accent-color-1: rgb(254 171 35);
	--link-color: var(--accent-color);
	--link-color-hover: var(--accent-color-1);
	--link-external-color: var(--accent-color);
	--link-external-color-hover: var(--accent-color-1);
	--callout-radius: 0.25em;
	--font-text-theme: "Open Sans";
	--font-monospace-theme: "Hack";
	--font-interface-theme: "Hack";
	--font-text-size: 1em;
	--line-height-normal: 1.75;
	--code-size: 1em;
	--code-radius: .25em;
}

.theme-light {
	--code-background: #fcf0ca;
}

.theme-dark {
	--text-normal: #ebdbb2;
	--background-primary: #282828;
	--code-background: #504945;
}

.published-container {
	--page-width: 800px;
	--nav-parent-item-color: var(--accent-color); 	
	--nav-parent-item-color-active: var(--accent-color-1);
	--nav-item-color: var(--accent-color);
	--nav-item-color-hover: var(--accent-color-1);
	--nav-item-color-active: var(--accent-color-1);
	--nav-item-border-color-active: var(--accent-color-1);
	--logo-max-width: 100%;
	--logo-max-height: auto;
	--site-name-font: "Hack";
	--page-title-font: "Hack";
	--page-title-size: 2.25em;
	--footer-display: none;
	--outline-heading-color-active: var(--accent-color-1);
	pre {
		.language-json, .language-javascript {
			tab-size: 2;
		}
	}
}