: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%);
	--avatar: 64px; /* Blog avatar */
	--flag: 45deg; /* Pride flag */
	--image: 24rem; /* Postscript images */
	--main: 108rem; /* Main width */
	--post: 75ch; /* Article text width */
	--view: 300px; /* Sidebar width */
	--float: 88px; /* Floating sidebar width */
	--thumb: 16rem; /* Gallery artwork thumbnail */
	--pad-s: 0.4rem;
	--pad-m: 0.8rem;
	--pad-l: 1rem;
	--pad-xl: 2rem;
	--pad-xxl: 4rem;
	--round: 16px; /* Border radius */
	--trans: 300ms;
	--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 slide {
	0% {
		background-position: 0% 100%;
	}

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

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

@keyframes jump {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-4px);
	}
}
@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: Nosey Rodent;
	src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype");
}
