:root {
	--bg-color: white;
	--main-text-color: black;

	--main-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	--outline-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

	--nav-icon-hover-color: #D4D3D4;
	--alt-text-color: #3a3a3a;

	--button-bg-color: black;
	--button-text-color: white;
	--button-border-radius: 20px;
	--button-border: 2px black solid;
	--button-bg-color-on-hover: white;
	--button-text-color-on-hover: black;

	--searchbar-border: 2px black solid;

	--link-text-color: #0000EE;
	--link-hover-color: #0000EE;
	--link-visited-color: #551A8B;
}


/* set dark mode stuff */

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #111215;
		--card-color: #1A1B1E;
		--main-text-color: #F4F4F6;
		--alt-text-color: #A0A0A5;


		--main-shadow: 0px 4px 12px rgba(0, 0, 0, 0.32);
		--outline-shadow:
		rgba(255, 255, 255, 0.04) 0px 1px 3px 0px,
		rgba(255, 255, 255, 0.12) 0px 0px 0px 1px;


		--nav-icon-hover-color: none;

		--button-bg-color: #F5F5F7;
		--button-text-color: #111215;
		--button-border-radius: 20px;
		--button-border: 2px solid #2C2D32;

		--button-bg-color-on-hover: #2C2D32;
		--button-text-color-on-hover: #F5F5F7;


		--searchbar-border: 2px solid #2C2D32;

		--link-text-color: #6CA8FF;
		--link-hover-color: #A9C9FF;
		--link-visited-color: #9BA2D0;
	}

	/* inverts the colours of the icons in the navbar */
	nav img {
		filter: brightness(0) invert(1);
	}
}