/* Global Styles */
html{
	margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text-color1);
  accent-color: var(--primary-color);
  border-color: var(--secondary-color);
  fill: var(--primary-color);
	background-color: var(--background-color1);
}


/* Dark mode styles */
body.dark {
  background-color: var(--background-color1);
}

.cardWrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 32px; /* Space between cards */
	/* margin-left: 242px; */
	margin-top: 100px;
	/* center horizontally */
	margin-left: auto;
	margin-right: auto;
	width: 1000px; /* Fixed width of the wrapper */
	height: auto; /* Container grows with content */
	/* background-color: var(--background-color3); */
}

.cardFull,
.cardHalf,
.cardThird,
.cardQuarter,
.cardTwoThird,
.cardThreeQuarter {
	box-sizing: border-box;
	background-color: var(--background-color2);
	padding: 12px;
	border-radius: 5px;
}

.cardFull {
	width: 100%; /* Full width of the wrapper */
}
.cardFull2 {
	width: 100%; /* Full width of the wrapper */
	border-radius: 10px;
}

.cardHalf {
	width: calc(50% - 16px); /* Half of the wrapper width minus half the gap */
}

.cardThird {
	width: calc(33.333% - (2 * (32px / 3))); /* One third of the wrapper width minus the gaps */
}

.cardQuarter {
	width: calc(25% - (3 * (32px / 4))); /* One Quarter of the wrapper width minus the gaps */
}

.cardThreeQuarter {
	width: calc(75% - (32px / 4)); /* Three Quarter of the wrapper width minus the gaps */
}

.cardTwoThird {
	width: calc(66.666% - (2 * (32px / 3))); /* One third of the wrapper width minus the gaps */
}

#svelte {
	flex: 1;
}

:root {
	--font: century gothic, sans-serif;

	--background-color2: #ececec;
	--background-color3: #d8d8d8;

	--shadow2: rgba(167, 162, 162, 0.4);


	--text-color2: #d8d8d8;
	--text-color3: #8b8b8b;

	--primary-color1: #0062c8;
	--primary-color2: #bfdfff;
	--primary-color3: #82c0ff;
	--primary-color4: #44a2ff;
	--primary-color5: #004a95;
	--primary-color6: #003264;

	--secondary-color1: #333f48;
	--secondary-color2: #d1d9de;
	--secondary-color3: #a5b4be;
	--secondary-color4: #768d9e;
	--secondary-color5: #262f35;
	--secondary-color6: #1a2024;

	--tertiary-color1: #fce300;
	--tertiary-color2: #fffaca;
	--tertiary-color3: #fff497;
	--tertiary-color4: #ffef64;
	--tertiary-color5: #bdaa00;
	--tertiary-color6: #7d7100;

	--red-color1: #ef3340;
	--red-color2: #fcd6d9;
	--red-color3: #f9acb1;
	--red-color4: #f5838b;
	--red-color5: #c9101e;
	--red-color6: #860b14;

	--green-color1: #97d700;
	--green-color2: #edffc4;
	--green-color3: #dbff88;
	--green-color4: #caff4d;
	--green-color5: #709f00;
	--green-color6: #4a6a00;

	--black-color1: #000000;
	--black-color2: #808080;
	--black-color3: #595959;
	--black-color4: #404040;
	--black-color5: #262626;
	--black-color6: #0d0d0d;

	--lGray-color1: #a1a1a1;
	--lGray-color2: #ececec;
	--lGray-color3: #d9d9d9;
	--lGray-color4: #c7c7c7;
	--lGray-color5: #797979;
	--lGray-color6: #515151;

	--dGray-color1: #3f3f3f;
	--dGray-color2: #d8d8d8;
	--dGray-color3: #b1b1b1;
	--dGray-color4: #8b8b8b;
	--dGray-color5: #2f2f2f;
	--dGray-color6: #1f1f1f;


	--text-color1: #1f1f1f;
	--background-color1: #ffffff;
	--shadow1: rgba(167, 162, 162, 0.2);
	--cardColor: linear-gradient(to bottom, rgba(236, 236, 236, 0.8), rgba(216, 216, 216, 0.8));
	--cardColor2: rgba(230, 230, 230, 0.1);
	--cardColor3: rgba(255, 255, 255, 0.541);

	--blue: #0062c8;
	--Lblue: #004a95;
	--red: #ef3340;
	--gray: #444444;
	--Lgray: #252525;
	--white: #ffffff;
	--green: #97d700;

}

.dark {
	--text-color1: #ffffff;
	--background-color1: #18181b;
	--shadow1: rgba(0, 0, 0, 0.2);
	--cardColor: linear-gradient(to bottom, rgba(42, 43, 46, 0.8), rgba(29, 29, 32, 0.8));
	--cardColor2: rgba(42, 43, 46, 0.2);
	--cardColor3: rgba(255, 255, 255, 0.1);
	
	--blue: #084ab9;
	--Lblue: #0485cd;
	--red: #b90808;
	--gray: #95989d;
	--Lgray: #3a3a3a;
	--white: #ffffff;
	--green: #20CD04;






	--font: apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

	--background-color2: #282b2d;
	--background-color3: #3d4043;

	--shadow2: rgba(0, 0, 0, 0.4);

	--text-color1: #ffffff;
	--text-color2: #dcddde;

	--primary-color1: #17b8bd;
	--primary-color2: #caf8f9;
	--primary-color3: #95f0f2;
	--primary-color4: #60e9ec;
	--primary-color5: #118b8e;
	--primary-color6: #0c5c5f;

	--secondary-color1: #885a89;
	--secondary-color2: #e9dce9;
	--secondary-color3: #d0bad1;
	--secondary-color4: #bb98bc;
	--secondary-color5: #664367;
	--secondary-color6: #432d44;

	--tertiary-color1: #f49e4c;
	--tertiary-color2: #fdecdb;
	--tertiary-color3: #fbd9b7;
	--tertiary-color4: #f9c693;
	--tertiary-color5: #e2780e;
	--tertiary-color6: #96500a;

	--red-color1: #da3333;
	--red-color2: #f8d6d6;
	--red-color3: #f0acac;
	--red-color4: #e98585;
	--red-color5: #ab1f1f;
	--red-color6: #721414;

	--green-color1: #12664f;
	--green-color2: #bcf3e4;
	--green-color3: #79e8c9;
	--green-color4: #36dcae;
	--green-color5: #0e4b3a;
	--green-color6: #093327;

	--black-color1: #1212;
	--black-color2: #888888;
	--black-color3: #656565;
	--black-color4: #4d4d4d;
	--black-color5: #353535;
	--black-color6: #1e1e1e;

	--lGray-color1: #c6b9cd;
	--lGray-color2: #f3f0f4;
	--lGray-color3: #e8e2eb;
	--lGray-color4: #ddd5e1;
	--lGray-color5: #9881a5;
	--lGray-color6: #675272;

	--dGray-color1: #53565a;
	--dGray-color2: #dcddde;
	--dGray-color3: #b8bbbe;
	--dGray-color4: #95989d;
	--dGray-color5: #3d4043;
	--dGray-color6: #282b2d;

	/* axis colors */
	--axis-text-color: var(--text-color3);
	--axis-line-color: var(--secondary-color2);


}

/* opacity: 0.85; */

/* Dark Theme Colors */
/* --native-dark-accent-color: rgba(169, 169, 169); */
/* --native-dark-background-color: #181818; */
/* --native-dark-border-color: rgba(85, 85, 85);
  --native-dark-font-color: rgba(220, 220, 220);
  --native-dark-fill-color: rgba(125, 125, 125);
  --native-dark-link-color: rgba(141, 178, 229);
  --native-dark-visited-link-color: rgba(199, 110, 215);
  --native-dark-opacity: 0.85;

  color-scheme: dark;
  accent-color: var(--native-dark-accent-color);
  background-color: var(--native-dark-background-color);
  border-color: var(--native-dark-border-color);
  color: var(--native-dark-font-color);
  fill: var(--native-dark-fill-color);
  opacity: var(--native-dark-opacity); */