:root {
	/*base color palette located here: 
  https://coolors.co/1d1d1d-969696-f7f7f7-5d001c-a90b3a-e20233-ff284c
  
  There were some adjustments that needed to be made in order to get proper contrast.
  */
	--carbon-black: #0f181b;
	--carbon-black2: rgb(38, 36, 44);
	--gray-olive: #969696;
	--bright-snow: #f7f7f7;
	--night-bordeaux: #5d001c;
	--cherry-rose: #a90b3a;
	--hot-fuschia: #ff5757;
	--classic-crimson: #ff8888;

	---const-dark: var(--carbon-black);
	---const-bright: var(--bright-snow);
}

[data-bs-theme="dark"] body {
	color-scheme: dark;
	/*These are all the styles that can be changed later depending.*/
	---title-main: var(--hot-fuschia);
	---minititle-main: var(--classic-crimson);
	---bg-main: var(--carbon-black);
	---card-bg-main: var(--carbon-black2);
	---text-main: var(--bright-snow);

	---border-main: var(--coffee-bean);

	---link-main: var(--soft-blue);
	---link-hover: var(--chetwode);
	---link-click: var(--amparo-blue);

	---link-alt-hover: var(--crushed-velvet);
	---link-alt-click: var(--early-spring-night);

	---active-nav: var(--bright-snow);

	---focus-main: white;
}
[data-bs-theme="light"] body {
	color-scheme: light;

	---bg-main: var(--bright-snow);
	---title-main: var(--carbon-black);
	---minititle-main: var(--night-bordeaux);
	---text-main: var(--carbon-black);
	---card-bg-main: var(--classic-crimson);

	---border-main: var(--night-bordeaux);

	---link-main: var(--amparo-blue);
	---link-hover: var(--crushed-velvet);
	---link-click: var(--early-spring-night);

	---link-alt-hover: var(--soft-blue);
	---link-alt-click: var(--chetwode);

	---active-nav: var(--carbon-black);

	---border-main: var(--hot-fuschia);

	---focus-main: black;
}

#hanging {
	width: 25%;
}

@media only screen AND (max-device-width: 1280px) {
	#hanging {
		width: 100%;
	}
}