/* ---------------------------------- */
/*           LICENSE / CREDITS        */
/* ---------------------------------- */
/*! Copyright
    Please do not reproduce without permission.
    Credits:
    - normalize.css (MIT License), github.com/necolas/normalize.css
    - Flexoki (MIT License), github.com/kepano/flexoki
    - Bootstrap v5.3.3 (MIT License), getbootstrap.com
	- Smol CSS, https://smolcss.dev/#smol-container
*/

/* ---------------------------------- */
/*           ROOT VARIABLES           */
/* ---------------------------------- */

/* Defaults */
:root {
	--rap-body-font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
	--rap-body-line-height: 1.5;
	--rap-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--rap-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--rap-body-font-family: var(--rap-font-sans-serif);
	--rap-body-font-size: 1rem;
	--rap-body-font-weight: 400;
	--rap-body-line-height: 1.5;
	--rap-body-color-rgb: 33, 37, 41;
	--rap-heading-color: inherit;
	--rap-link-decoration: underline;
	--rap-border-width: 1px;
	--rap-border-style: solid;
	--rap-border-radius: 0.375rem;
	--rap-border-radius-sm: 0.25rem;
	--rap-border-radius-lg: 0.5rem;
	--rap-border-radius-xl: 1rem;
	--rap-border-radius-xxl: 2rem;
	--rap-border-radius-2xl: var(--rap-border-radius-xxl);
	--rap-border-radius-pill: 50rem;
	--rap-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--rap-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--rap-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	--rap-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	--rap-focus-ring-width: 0.25rem;
	--rap-focus-ring-opacity: 0.25;
	--rap-focus-ring-color: rgba(13, 110, 253, 0.25);

	/* Hue Chooser */

	--rap-primary-color-lightness: 55%;
	--rap-primary-color-chroma: 0.1678;
	--rap-primary-color-hue: 230;


	/* change the color of checkboxes or radio buttons */
	accent-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));




	/* 
	
The CSS property color-scheme is an opt-in to adapting browser UI elements including form controls, scrollbars, and CSS system colors. The adaptation asks the browser to render those items with either a light or dark scheme, and the property allows defining a preference order.
If you’re enabling adapting your entire application, set the following on the :root, which says to preference a dark theme (or flip the order to preference a light theme).
https://moderncss.dev/12-modern-css-one-line-upgrades/
	
*/
	color-scheme: light dark;

	--light-bg: ghostwhite;
	--light-color: darkslategray;
	--light-code: tomato;

	--dark-bg: darkslategray;
	--dark-color: ghostwhite;
	--dark-code: gold;

	/* https://stephango.com/flexoki */


	--flexoki-black: #100F0F;
	--flexoki-paper: #FFFCF0;
	--flexoki-50: #F2F0E5;
	--flexoki-100: #E6E4D9;
	--flexoki-150: #DAD8CE;
	--flexoki-200: #CECDC3;
	--flexoki-300: #B7B5AC;
	--flexoki-400: #9F9D96;
	--flexoki-500: #878580;
	--flexoki-600: #6F6E69;
	--flexoki-700: #575653;
	--flexoki-800: #403E3C;
	--flexoki-850: #343331;
	--flexoki-900: #282726;
	--flexoki-950: #1C1B1A;
	--flexoki-red-50: #FFE1D5;
	--flexoki-red-100: #FFCABB;
	--flexoki-red-150: #FDB2A2;
	--flexoki-red-200: #F89A8A;
	--flexoki-red-300: #E8705F;
	--flexoki-red-400: #D14D41;
	--flexoki-red-500: #C03E35;
	--flexoki-red-600: #AF3029;
	--flexoki-red-700: #942822;
	--flexoki-red-800: #6C201C;
	--flexoki-red-850: #551B18;
	--flexoki-red-900: #3E1715;
	--flexoki-red-950: #261312;
	--flexoki-orange-50: #FFE7CE;
	--flexoki-orange-100: #FED3AF;
	--flexoki-orange-150: #FCC192;
	--flexoki-orange-200: #F9AE77;
	--flexoki-orange-300: #EC8B49;
	--flexoki-orange-400: #DA702C;
	--flexoki-orange-500: #CB6120;
	--flexoki-orange-600: #BC5215;
	--flexoki-orange-700: #9D4310;
	--flexoki-orange-800: #71320D;
	--flexoki-orange-850: #59290D;
	--flexoki-orange-900: #40200D;
	--flexoki-orange-950: #27180E;
	--flexoki-yellow-50: #FAEEC6;
	--flexoki-yellow-100: #F6E2A0;
	--flexoki-yellow-150: #F1D67E;
	--flexoki-yellow-200: #ECCB60;
	--flexoki-yellow-300: #DFB431;
	--flexoki-yellow-400: #D0A215;
	--flexoki-yellow-500: #BE9207;
	--flexoki-yellow-600: #AD8301;
	--flexoki-yellow-700: #8E6B01;
	--flexoki-yellow-800: #664D01;
	--flexoki-yellow-850: #503D02;
	--flexoki-yellow-900: #3A2D04;
	--flexoki-yellow-950: #241E08;
	--flexoki-green-50: #EDEECF;
	--flexoki-green-100: #DDE2B2;
	--flexoki-green-150: #CDD597;
	--flexoki-green-200: #BEC97E;
	--flexoki-green-300: #A0AF54;
	--flexoki-green-400: #879A39;
	--flexoki-green-500: #768D21;
	--flexoki-green-600: #66800B;
	--flexoki-green-700: #536907;
	--flexoki-green-800: #3D4C07;
	--flexoki-green-850: #313D07;
	--flexoki-green-900: #252D09;
	--flexoki-green-950: #1A1E0C;
	--flexoki-cyan-50: #DDF1E4;
	--flexoki-cyan-100: #BFE8D9;
	--flexoki-cyan-150: #A2DECE;
	--flexoki-cyan-200: #87D3C3;
	--flexoki-cyan-300: #5ABDAC;
	--flexoki-cyan-400: #3AA99F;
	--flexoki-cyan-500: #2F968D;
	--flexoki-cyan-600: #24837B;
	--flexoki-cyan-700: #1C6C66;
	--flexoki-cyan-800: #164F4A;
	--flexoki-cyan-850: #143F3C;
	--flexoki-cyan-900: #122F2C;
	--flexoki-cyan-950: #101F1D;
	--flexoki-blue-50: #E1ECEB;
	--flexoki-blue-100: #C6DDE8;
	--flexoki-blue-150: #ABCFE2;
	--flexoki-blue-200: #92BFDB;
	--flexoki-blue-300: #66A0C8;
	--flexoki-blue-400: #4385BE;
	--flexoki-blue-500: #3171B2;
	--flexoki-blue-600: #205EA6;
	--flexoki-blue-700: #1A4F8C;
	--flexoki-blue-800: #163B66;
	--flexoki-blue-850: #133051;
	--flexoki-blue-900: #12253B;
	--flexoki-blue-950: #101A24;
	--flexoki-purple-50: #F0EAEC;
	--flexoki-purple-100: #E2D9E9;
	--flexoki-purple-150: #D3CAE6;
	--flexoki-purple-200: #C4B9E0;
	--flexoki-purple-300: #A699D0;
	--flexoki-purple-400: #8B7EC8;
	--flexoki-purple-500: #735EB5;
	--flexoki-purple-600: #5E409D;
	--flexoki-purple-700: #4F3685;
	--flexoki-purple-800: #3C2A62;
	--flexoki-purple-850: #31234E;
	--flexoki-purple-900: #261C39;
	--flexoki-purple-950: #1A1623;
	--flexoki-magenta-50: #FEE4E5;
	--flexoki-magenta-100: #FCCFDA;
	--flexoki-magenta-150: #F9B9CF;
	--flexoki-magenta-200: #F4A4C2;
	--flexoki-magenta-300: #E47DA8;
	--flexoki-magenta-400: #CE5D97;
	--flexoki-magenta-500: #B74583;
	--flexoki-magenta-600: #A02F6F;
	--flexoki-magenta-700: #87285E;
	--flexoki-magenta-800: #641F46;
	--flexoki-magenta-850: #4F1B39;
	--flexoki-magenta-900: #39172B;
	--flexoki-magenta-950: #24131D
}

/* ---------------------------------- */
/*         THEME COLOR SCHEMES        */
/* ---------------------------------- */

:root,
:root[data-theme='light'] {
	--rap-body-bg: var(--flexoki-paper);
	--rap-secondary-bg: var(--flexoki-50);
	--rap-body-color: var(--flexoki-black);
	--rap-color-tx-muted: var(--flexoki-600);
	--rap-color-tx-faint: var(--flexoki-300);
	--rap-color-ui-normal: var(--flexoki-100);
	--rap-color-ui-hover: var(--flexoki-150);
	--rap-color-ui-active: var(--flexoki-200);
	--rap-color-highlight: var(--flexoki-yellow-100);
	--rap-color-action: var(--flexoki-cyan-600);
	--rap-color-bg-hover: var(--flexoki-cyan-50);
	--rap-color-re: var(--flexoki-red-600);
	--rap-color-re-hover: var(--flexoki-red-400);
	--rap-color-or: var(--flexoki-orange-600);
	--rap-color-or-hover: var(--flexoki-orange-400);
	--rap-color-ye: var(--flexoki-yellow-600);
	--rap-color-ye-hover: var(--flexoki-yellow-400);
	--rap-color-gr: var(--flexoki-green-600);
	--rap-color-gr-hover: var(--flexoki-green-400);
	--rap-color-cy: var(--flexoki-cyan-600);
	--rap-color-cy-hover: var(--flexoki-cyan-400);
	--rap-color-bl: var(--flexoki-blue-600);
	--rap-color-bl-hover: var(--flexoki-blue-400);
	--rap-color-pu: var(--flexoki-purple-600);
	--rap-color-pu-hover: var(--flexoki-purple-400);
	--rap-color-ma: var(--flexoki-magenta-600);
	--rap-color-ma-hover: var(--flexoki-magenta-400);
	--toggle-background: var(--flexoki-50);
}

:root[data-theme='dark'] {
	--rap-body-bg: var(--flexoki-black);
	--rap-secondary-bg: var(--flexoki-950);
	--rap-body-color: var(--flexoki-200);
	--rap-color-tx-muted: var(--flexoki-500);
	--rap-color-tx-faint: var(--flexoki-700);
	--rap-color-ui-normal: var(--flexoki-900);
	--rap-color-ui-hover: var(--flexoki-850);
	--rap-color-ui-active: var(--flexoki-800);
	--rap-color-highlight: var(--flexoki-yellow-900);
	--rap-color-action: var(--flexoki-cyan-400);
	--rap-color-bg-hover: var(--flexoki-cyan-950);
	--rap-color-re: var(--flexoki-red-400);
	--rap-color-re-hover: var(--flexoki-red-600);
	--rap-color-or: var(--flexoki-orange-400);
	--rap-color-or-hover: var(--flexoki-orange-600);
	--rap-color-ye: var(--flexoki-yellow-400);
	--rap-color-ye-hover: var(--flexoki-yellow-600);
	--rap-color-gr: var(--flexoki-green-400);
	--rap-color-gr-hover: var(--flexoki-green-600);
	--rap-color-cy: var(--flexoki-cyan-400);
	--rap-color-cy-hover: var(--flexoki-cyan-600);
	--rap-color-bl: var(--flexoki-blue-400);
	--rap-color-bl-hover: var(--flexoki-blue-600);
	--rap-color-pu: var(--flexoki-purple-400);
	--rap-color-pu-hover: var(--flexoki-purple-600);
	--rap-color-ma: var(--flexoki-magenta-400);
	--rap-color-ma-hover: var(--flexoki-magenta-600);
	--toggle-background: var(--flexoki-950);


	--rap-body-bg: #212529;
	--rap-emphasis-color: #fff;

	--rap-tertiary-color: rgba(222, 226, 230, 0.5);
	--rap-tertiary-bg: #2b3035;
	--rap-primary-text-emphasis: #6ea8fe;
	--rap-secondary-text-emphasis: #a7acb1;
	--rap-success-text-emphasis: #75b798;
	--rap-info-text-emphasis: #6edff6;
	--rap-warning-text-emphasis: #ffda6a;
	--rap-danger-text-emphasis: #ea868f;
	--rap-light-text-emphasis: #f8f9fa;
	--rap-dark-text-emphasis: #dee2e6;
	--rap-primary-bg-subtle: #031633;
	--rap-secondary-bg-subtle: #161719;
	--rap-success-bg-subtle: #051b11;
	--rap-info-bg-subtle: #032830;
	--rap-warning-bg-subtle: #332701;
	--rap-danger-bg-subtle: #2c0b0e;
	--rap-light-bg-subtle: #343a40;
	--rap-dark-bg-subtle: #1a1d20;
	--rap-primary-border-subtle: #084298;
	--rap-secondary-border-subtle: #41464b;
	--rap-success-border-subtle: #0f5132;
	--rap-info-border-subtle: #087990;
	--rap-warning-border-subtle: #997404;
	--rap-danger-border-subtle: #842029;
	--rap-light-border-subtle: #495057;
	--rap-dark-border-subtle: #343a40;
	--rap-heading-color: inherit;
	--rap-link-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	--rap-link-hover-color: #8bb9fe;
	--rap-highlight-color: #dee2e6;
	--rap-highlight-bg: #664d03;
	--rap-border-color: #495057;
	--rap-form-valid-color: #75b798;
	--rap-form-valid-border-color: #75b798;
	--rap-form-invalid-color: #ea868f;
	--rap-form-invalid-border-color: #ea868f;



}

/* Light mode 
@media (prefers-color-scheme: light) {
	:root {
		--rap-color-scheme-background: white;
		--rap-color-scheme-text-color: black;
	}
}
	*/

/* Dark mode 
@media (prefers-color-scheme: dark) {
	:root {
		--rap-color-scheme-background: black;
		--rap-color-scheme-text-color: white;
	}
}
	*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}

	html {
		transition: background 0.3s, color 0.3s;
	}
}

/*

View Transitions

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025
https://developer.chrome.com/docs/web-platform/view-transitions/cross-document

It signals your website would like to use page transitions when links are clicked, and the default transition is a crossfade.
If the browser doesn't support it, it continues as it always has.

*/

/* The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA). */






@media (prefers-reduced-motion: no-preference) {

	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.5s;
	}

	/*

::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}


	*/





}

/* Trigger with JS:
document.startViewTransition(() => {
  // DOM updates here
}); */


@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
		transition: none;
	}
}

html {
	width: 100%;
	height: 100%;
}

body {
	color-scheme: light dark;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: var(--rap-body-bg);
	/* background-color: light-dark(var(--light-bg), var(--dark-bg));*/
	color: light-dark(var(--light-color), var(--dark-color));
	font-family: var(--rap-body-font-family);
	line-height: var(--rap-body-line-height);
	padding: 0;
	overflow-x: hidden;
	color: var(--rap-body-color);
	margin: 0;
	font-size: var(--rap-body-font-size);
	font-weight: var(--rap-body-font-weight);
	text-align: var(--rap-body-text-align);
	-webkit-text-size-adjust: 100%;
}

/* Container 

.container {
  width: min(100% - 3rem, var(--container-max, 1000ch));
  margin-inline: auto;
}



*/

/* Base: Mobile first (360px / 375px and up) */
.container {
	width: 100%;
	padding: 0 16px;
	/* mobile padding */
	margin: 0 auto;
}

/* Small (600px – 767px) */
@media (min-width: 600px) and (max-width: 767px) {
	.container {
		width: 100%;
		max-width: 580px;
	}
}

/* Medium (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.container {
		max-width: 750px;
	}
}

/* Large (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
	.container {
		max-width: 1000px;
	}
}

/* Extra Large (1280px – 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
	.container {
		max-width: 1280px;
	}
}

/* Extra Extra Large (≥1440px) */
@media (min-width: 1440px) {
	.container {
		max-width: 1280px;
	}
}



/* Hero Image */

.hero-image {
	max-width: 1400px;
	width: 100%;
	height: auto;
}



main,
article {
	padding: 1em;
	/* fallback for browsers lh without support */
	padding: 1lh;
}

/* Clever CSS mixin that will output the value as pseudo-elements 
https://github.com/kizu/mixins/blob/main/preview.css
*/

.customwidth {
	--width: calc(50cqi + 2em);
	--preview: var(--width);
	/* How wide is --width? */
}



/* Grid 
https://smolcss.dev/
*/
.smol-flexbox-grid {
	--min: 10ch;
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	list-style: none;
	padding: 0;
}

.smol-flexbox-grid>* {
	flex: 1 1 var(--min);
}

.smol-flexbox-grid li {
	display: grid;
	padding: 1rem;
	/*background-color: #e0d4f6;
  color: #675883;*/
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) / 30%);
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	/*var(--rap-body-color); */
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: bold;
	text-align: center;
	border-radius: 0.15em;
	border: 1px dashed;
	place-items: center;
}

/* https://utopia.fyi/ */

::selection {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) / 30%);
	/* Highlight background */
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	/* Highlighted text color */
}

/**
 * Only style programmatically focused elements if needed
 * @link https://code.google.com/p/chromium/issues/detail?id=37721
 https://gomakethings.com/tabindex-programmatic-focus-and-outline-styles/
 */

[tabindex="-1"]:focus {
	outline: none;
}

[tabindex="-1"]:focus-visible {
	outline: 2px solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	;
}





h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.3;
	margin-bottom: 0;
	padding-bottom: 0;
	text-wrap: balance;
}

h1 {
	font-weight: 500;
	font-size: 2em;
	font-size: calc(1.35em + 0.55vw);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-top: 1.5em;
	margin-bottom: 0.25em
}

h2 {
	font-weight: 500;
	font-size: 1.4em;
	font-size: calc(1em + 0.2vw);
	letter-spacing: -0.015em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	line-height: 1.3
}

h3 {
	font-weight: 500;
	font-size: 1.2em;
	font-size: 1em;
	line-height: 1.3;
	margin-top: 1em;
	margin-bottom: 0.5em
}

h4 {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1em
}

h5 {
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	margin-bottom: 1em;
	letter-spacing: 0.05em;
	font-size: 1.4rem
}

/* https://codepen.io/chriscoyier/pen/mdNgVvR */
.layeredTextEffect {
	font-size: 3.1rem;
	line-height: 1.1;
	text-align: center;
	paint-order: stroke fill;
	-webkit-text-stroke: 6px oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	text-shadow: -1px -1px 0 white;
}

/* Buttons */

.button {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
}

/* Skip Link
Visually hiding the skip link when it doesn’t have focus
Showing the skip link when it receives focus
Preventing the main content container getting a focus outline when the skip link is followed (since a focus indicator would suggest it’s interactive, and it’s not; plus focus can’t be placed back onto it manually so an indicator would be doubly misleading)
https://www.tempertemper.net/blog/skip-links-what-why-and-how

*/

.skip-link:not(:focus):not(:active) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

main:focus {
	outline: none;
}

/* Navbar */

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	padding: 15px;
	color: white;
	position: relative;
}

.navbar * {
color:#fff;
}

.navbar-brand {
	font-size: 1.5rem;
}

.navbar-nav {
	display: flex;
	list-style: none;
}

.navbar-nav li {
	/* margin: 0 10px; */
	margin: 0 0 0 10px;
	text-align: right;
}

.navbar-nav a {
	color: #fff;
	text-decoration: none;
	/* padding: 8px 12px; */
	padding: 8px 0 8px 24px;
	transition: background 0.3s;
}

.navbar-nav button {
	/* padding: 0px 12px; */
	padding: 0 0 0 24px;
	transition: background 0.3s;
}

.color-chooser-button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.navbar-nav a:hover,
.navbar-nav button:hover {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	border-radius: 5px;
}
/*
.menu-toggle {
	display: none;
	cursor: pointer;
}

.menu-toggle div {
	width: 30px;
	height: 4px;
	background: white;
	margin: 5px;
}


@media (max-width: 768px) {
	.navbar-nav {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 60px;
		left: 0;
		background: #333;
		text-align: center;
	}

	.navbar-nav.active {
		display: flex;
	}

	.menu-toggle {
		display: block;
	}
}
*/ 

.notetext {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) / 10%);
	border-left: .25rem solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
}

/* Animation Preferences */
/* 

Set the animation only if the user has no motion preference. This has the advantage of reducing the amount of code we need to write, and means it’s less likely we’ll forget to cater for users’ motion preferences:
https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/

 */



/* Form */


input {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) / 30%);
	display: block;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-clip: padding-box;
	border: 1px solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	border-radius: 6px;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}





/* 
Dynamic Viewport
You can use these new viewport units today as a progressive enhancement by also including the stable unit in the corresponding direction, example:
*/

.cover-dynamic-viewport {
	width: 100vw;
	width: 100dvi;
	height: 100vh;
	height: 100dvb;
}

/* HTML Dialog */


body:has(dialog[open]) {
	overflow: hidden;
}

dialog::backdrop {
	backdrop-filter: blur(2px);
}


/* The :user-valid and :user-invalid pseudo-class selectors help improve the user experience of input validation by giving feedback about mistakes only after a user has changed input. With these new selectors, there's no longer a need to write stateful code to keep track of input a user has changed. */

input:user-invalid {
	border-color: red;
}

input:user-valid {
	border-color: green;
}

/* The :has() pseudo-class is a powerful new addition to CSS that allows you to select an element based on its children or descendants.
.container:has(.child) {
	border: 2px solid blue;
}
/*

/* CSS Custom Highlight API  */

::highlight(custom-highlight) {
	background-color: #ff0;
	color: black;
}

/* Text Wrap */

.balanced-text {
	text-wrap: balance;
}


/* 

/*
Scroll to Top CSS (Button)
*/

.scroll-top-wrapper {
	position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 10;
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	color: #eeeeee;
	width: 50px;
	height: 48px;
	line-height: 48px;
	right: 30px;
	bottom: 30px;
	padding-bottom: 2px;
	border: 1px solid color-mix(in oklab, oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)), #000000 50%);
	;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.scroll-top-wrapper.show {
	visibility: visible;
	cursor: pointer;
	opacity: .5;
}

.scroll-top-wrapper:hover {
	background-color: color-mix(in oklab, oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)), #000000 20%);
	border: 1px solid color-mix(in oklab, oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)), #000000 30%);
	opacity: 1;
}

.scroll-top-wrapper i.fa {
	line-height: inherit;
}

/* Links - New Text-Decoration Values */


a:not(.navbar-nav a),
a:not(.navbar-nav a):link,
a:not(.navbar-nav a):visited {
	outline: none;
	/* text-decoration: none;
	 border-bottom: 1px solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)); */
	text-underline-offset: 0.25em;
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
}

a:not(.navbar-nav a):hover {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) /20%);
}

a,
a:link,
a:visited,
a:hover {
	-moz-transition: background .35s ease-in, color .35s ease-in;
	-o-transition: background .35s ease-in, color .35s ease-in;
	-webkit-transition: background .35s ease-in, color .35s ease-in;
	transition: background .35s ease-in 0, color .35s ease-in 0;
}



/* Tag Cloud */


.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	text-decoration: none;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	transition: color 0.3s ease, background 0.3s ease;
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) /10%);
}

.tag:hover {
	background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue) /20%);
}




/* Theme Toggle */




.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: color-mix(in oklab, oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)), #000000 20%);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	min-width: 160px;
	z-index: 1;
}

.dropdown a {
	color: #333;
	padding: 10px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #f1f1f1;
}

.show {
	display: block;
}








.btn-theme-toggle {
	background: none;
	border: none;
	/* color: #007bff;*/
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	font-size: 1rem;
}

.btn-theme-toggle:hover {
	/* text-decoration: underline;
  color: #0056b3; */
}

.btn-theme-toggle:focus {
	outline: none;
	box-shadow: none;
}

/*  ensure the text wraps in a way that creates a harmonious text block.  */

p {
	text-wrap: balance;
}

/* Hue Slider */

.color-chooser-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	padding: 1em;
	white-space: nowrap;
	transition: opacity 0.3s ease;
	opacity: 1;
}

.color-chooser-container label,
.color-chooser-container input {
	margin: 10px;
}



.rap-title {
	color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	/* color: oklch(calc(var(--rap-primary-color-lightness) * 1.4) var(--rap-primary-color-chroma) var(--rap-primary-color-hue)); */
}

#hueSlider {
	-webkit-appearance: none;
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(to right,
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 0),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 60),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 120),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 180),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 240),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 300),
			oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) 360));
	outline: none;
	border: none;
	cursor: pointer;
}

#hueSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	;
	cursor: pointer;
	transition: background 0.1s ease-in-out;
}

#hueSlider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
	;
	cursor: pointer;
	transition: background 0.1s ease-in-out;
}



/* Custom Slider Thumb 


.brush-slider {
	-webkit-appearance: none;
	width: 300px;
	height: 8px;
	background: #ddd;
	outline: none;
	border-radius: 4px;
  }

*/



/* WebKit browsers: Chrome, Safari 
#hueSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/></svg>") no-repeat center;
	background-size: contain;
	background-color: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.1s ease-in-out;
  }
  */
/* Firefox 
  #hueSlider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/></svg>") no-repeat center;
	background-size: contain;
	background-color: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.1s ease-in-out;
  }
  */

/* Copy to Clipboard Web Component

  */

copy-to-clipboard:not(:defined) {
	display: none;
}

/**
 * Visually hide an element, but leave it available for screen readers
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
copy-to-clipboard [role="status"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}



.page-footer {
background-color: oklch(var(--rap-primary-color-lightness) var(--rap-primary-color-chroma) var(--rap-primary-color-hue));
text-align: center;
}

/* Print

https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/

*/


@media print {

	.hidden-print {
		display: none !important;
	}


	@page {
		size: A4 portrait;
		margin: 4cm 2cm;
	}

	/* links can’t be clicked, so it can be beneficial to place their location in brackets */

	a[href]:after {
		content: " (" attr(href) ")";
	}




	/* Hide the print button when printing */
	#btn-expensereport-print {
		display: none;
	}
}