:root {
	--primary: rgb(255, 190, 0);
	--secondary: rgb(255, 100, 0);
	--light: rgb(255, 252, 245);
	--dark: rgb(6, 2, 0);
	--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
	--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
	--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
	--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
	--primary-500: color-mix(in lch, var(--primary), var(--light));
	--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
	--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
	--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
	--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
	--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
	--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
	--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
	--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
	--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
	--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
	--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
	--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
	--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
	--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
	--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
	--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
	--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
	--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
	--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
	--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
	--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
	--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
	--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
	--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
	--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
	--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
	--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
	--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
	--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
	--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
	--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
	--trans: 300ms;
	--image: 24rem;
	--post: 75ch;
	--round: 16px;
	--pad-xl: 2rem;
	--pad-lm: 1.4rem;
	--pad-l: 1rem;
	--pad-m: 0.8rem;
	--pad-sm: 0.4rem;
	--flag: 45deg;
	--paw: url("/assets/img/theme/paw.svg");
	--paw-tiled: url("/assets/img/theme/paw-tiled.png");
	--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
		drop-shadow(0.5px 0 var(--dark)) drop-shadow(-0.5px 0 var(--dark))
		drop-shadow(0 1px var(--light)) drop-shadow(0 -1px var(--light))
		drop-shadow(1px 0 var(--light)) drop-shadow(-1px 0 var(--light));
	--rainbow: linear-gradient(
		var(--flag),
		red 16.66%,
		orange 0 33.33%,
		yellow 0 50%,
		green 0 66.66%,
		blue 0 83.33%,
		indigo 0
	);
	--agender: linear-gradient(
		var(--flag),
		#000 0 14.28%,
		#c0c0c0 0 28.57%,
		#fff 0 42.85%,
		#a3fa73 0 57.14%,
		#fff 0 71.42%,
		#c0c0c0 0 85.71%,
		#000 0
	);
	--aromantic: linear-gradient(
		var(--flag),
		#0a2 20%,
		#7d6 0 40%,
		#fff 0 60%,
		#a9a9a9 0 80%,
		#000 0
	);
	--pansexual: linear-gradient(
		var(--flag),
		#f09 33.33%,
		#ffd700 0 66.66%,
		#00bfff 0
	);
	--transgender: linear-gradient(
		var(--flag),
		#00d2ff 20%,
		#ffa6b9 0 40%,
		white 0 60%,
		#ffa6b9 0 80%,
		#00d2ff 0
	);
}

@keyframes mainbg {
	0% {
		background-position: 0rem 0rem;
	}

	100% {
		background-position: 256px 256px;
	}
}

@keyframes slide {
	0% {
		background-position: 0% 100%;
	}

	100% {
		background-position: 200% 100%;
	}
}

@font-face {
	font-family: Rubik;
	src: url("/assets/fonts/Rubik.ttf") format("truetype");
}

@font-face {
	font-family: Urbanist;
	src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
}

@font-face {
	font-family: Pangolin;
	src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
}

@font-face {
	font-family: Terminess;
	src: url("/assets/fonts/TerminessNerdFont-Regular.ttf") format("truetype");
}


@font-face {
	font-family: Nosey Rodent;
	src: url("/assets/fonts/noseyrodent.ttf") format("truetype");
}