/* 
	THEMING
	Mode: light/dark is automatically determined by system color scheme.
	There is no mode toggle.
*/

/* ------ THEMING - Light Mode ------ */
:root {
	--palette-primary: #4f46e5;

	--text: #1e293b;
	--text-muted: #64748b;
	--text-heading: #0f172a;
	--text-link: #2563eb;

	--code-background: #f6f7f9;
	--code-text: #47546b;
	--code-border: #e2e8f0;

	--border: #e2e8f0;
	--background: #ffffff;
}

/* ------ THEMING - Dark Mode ------ */
@media (prefers-color-scheme: dark) {
	:root {
		--palette-primary: #20bdff;

		--text: #d2d3d7;
		--text: #d4d4d8;
		--text-muted: #d2d3d7;
		--text-heading: #fafafa;
		--text-link: #20bdff;

		--code-text: #cbd5e0;
		--code-background: #1f2631;
		--code-border: #2d3748;

		--border: #2d3748;
		--background: #18181b;
	}

	html {
		color-scheme: dark;
	}
}

/* ------ GLOBAL STYLES - START ------ */

:root {
	font-family: Verdana, sans-serif;
	line-height: 1.75;
	scroll-behavior: smooth;
}

body {
	color: var(--text);
	background: var(--background);
	padding: 0 2rem;
	margin: auto;
	max-width: 70ch;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

strong,
b {
	color: var(--text-heading);
}

a:not(.unset) {
	color: var(--text-link);
	text-decoration: none;
	border-bottom: 1px solid #ccc;
}

nav a:not(.unset) {
	margin-right: 10px;
}

textarea {
	width: 100%;
	font-size: 1rem;
}

input {
	font-size: 1rem;
}

content {
	line-height: 1.6;
}

table {
	width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

code {
	padding: 2px 5px;
	color: var(--code-text);
	background-color: var(--code-background);
	border: 1px solid var(--code-border);
	border-radius: 4px;
}

code.unset {
	background-color: transparent;
	border: none;
}

pre {
	padding: 1rem;
}

pre>code {
	all: unset;
}

blockquote:not(.unset) {
	font-size: 1.125rem;
	width: 85%;
	margin: 0 auto;
	font-style: italic;
	color: var(--text);
	padding: 1.5rem 3rem;
	line-height: 1.9;
	position: relative;
}

blockquote:not(.unset)::before {
	font-family: Arial;
	content: "\201C";
	color: var(--text);
	font-size: 4rem;
	position: absolute;
	left: 10px;
	top: -10px;
}

blockquote:not(.unset)::after {
	content: '';
}

ul {
	padding-left: 1.5em;
}

ul li {
	padding-left: 0.4em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/* ------ GLOBAL STYLES - END ------ */

/* ------ REUSABLE UTIL STYLES - START ------ */

/* 
	class: gradient-text
	The text will be gradient.
	To use this, just set the css vars using a custom class in your component
*/
.gradient-text {
	--gradient-text-from: hotpink;
	--gradient-text-to: hotpink;
	--gradient-text-via: var(--gradient-text-from), var(--gradient-text-to);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-via), var(--gradient-text-to));
}

/* 
	class: a.animated
	Animated links. An animated underline on hover.
*/
a.animated {
	--animated-underline-from: var(--text-link);
	--animated-underline-to: var(--text-link);
	position: relative;
	box-decoration-break: clone;
	text-decoration: none;
}

a.animated:after {
	left: 0;
	right: 0;
	bottom: -2px;
	content: "";
	height: 2px;
	position: absolute;
	transform: translateZ(0) scaleX(0);
	transform-origin: left center;
	transition: all 0.15s ease-in-out;
	background-image: linear-gradient(to right, var(--animated-underline-from), var(--animated-underline-to));
}

a.animated:hover:after {
	transform: translateZ(0) scale(1);
}

a.animated.active:after {
	transform: translateZ(0) scale(1);
}

/* ------ REUSABLE UTIL STYLES - START ------ */