html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	text-rendering: optimizeLegibility;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: initial ;
	color: black;
}

a:hover {
	color: #ffe91e;
}

a:selection {
	background-color: #ffe91e;
	color: var(--color-text);
}

.letter-style {
	--letter-index: 0; /* Will be set per element */
	--random-col: calc(60 - (var(--letter-index) * 9) / 2.5 * mod(var(--letter-index), 3.5));
	--random-row: calc(40 - (var(--letter-index) * 2.4) / 0.5 / mod(var(--letter-index), 3.5));
}

:root {
	color-scheme: light dark;
	/* light-dark */
	--LD-text: light-dark(var(--D-black), var(--D-white));
	--LD-background: light-dark(var(--D-white), var(--D-black));

	/* new design background */
	--inherit: inherit;
	--black: black;
	--white: white;
	--cream-bk: light-dark(blanchedalmond, rgb(91, 83, 72));
	--cream-bk: light-dark(hsl(36, 48%, 94%), hsl(36, 14%, 14%));
	--dark-brown: hsla(36, 14%, 14%, 0.43);
	--gray-bg2: #e6e6e6e7;
	--gray-bg: #d5d5d5e7;
	--gray-bg3: #f0f0f0;
	--kindabrown: #544b47;
	--tan-gray-bg: rgb(235, 233, 219);
	--tan-soft: #f5e5b9;
	--tan-light: #a8a390;
	/* --tan-light:#ccc9be; */
	--dark-subtle: #262624;
	--vibrant-blue: hsl(240, 100%, 50%);
	--bob-blue: #375ab2;
	--bob-blue: #0a5dc7;
	--soft-green: #c0cab0;

	--color-bg: var(--gray-bg);
	--color-bg: var(--tan-light);
	--color-bg: #cacaca;
	--color-bg: var(--gray-bg2);
	--color-bg-muted: var(--gray-bg3);
	--color-text: var(--inherit, var(--black));
	--color-text-invert: var(--inherit, var(--white));
	/* --primary-color: var(--vibrant-blue); */
	--secondary-color: #6c757d;
	--tritary-color: var(--tan-soft);
	--tritary-color-muted: color-mix(in oklch, var(--tritary-color) 95%, var(--color-text));
	--accent-color: var(--tan-light);
	--accent-color: var(--vibrant-blue);
	--accent-color: var(--bob-blue);

	--color-border: var(--vt-c-divider-light-2);
	--color-border-hover: var(--vt-c-divider-light-1);
	--color-heading: #262729;
	--color-heading: var(--bob-blue);

	/* box shadowing op componenten */
	--bottom-shadow: 0px 9px 12px -2px var(--D-mid-bk);

	--text-size-s: 1rem;
	--text-size-m: 1.5rem;
	--text-size-l: 2.025rem;

	--section-gap: 160px;
	--letter-total: 0; /* This will be updated dynamically */
}

/* @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: rgb(39, 37, 33);
      --color-bg: #121212;
      --color-bg-muted: rgb(39, 37, 33);
      --color-text: #ffffff;
      --primary-color: #ffe91e;
      --secondary-color: #6c757d;
      --accent-color: #17a2b8;
      --color-border: #495057;
      --color-border-hover: #fff;
      --color-heading: #dee2e6;
    }    
  } */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* vector-effect: non-scaling-stroke; */

	@supports (interpolate-size: allow-keywords) {
		interpolate-size: allow-keywords;
		transition-behavior: allow-discrete;
		scroll-behavior: smooth;
		font-size-adjust: 0.5;
	}
	@view-transition {
		navigation: auto;
	}
}