@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--primary-t: #0d0d0d;
		--secondary-t: #4f5052;
		--tertiary-t: #e5eaf5;
		--primary-b: #e5eaf5;
		--secondary-b: #dae0ef;
		--tertiary-b: #d0daf1;
		--quaternary-b: #dadfea;
		--primary-blue: #0f255c;
		--secondary-blue: #7c99df;
		--accent-blue: #255ad4;
	}
	:root[data-theme="dark"] {
		--primary-t: #f2f2f2;
		--secondary-t: #95979b;
		--tertiary-t: #e5eaf5;
		--primary-b: #0a0f1a;
		--secondary-b: #111725;
		--tertiary-b: #0e182f;
		--quaternary-b: #151924;
		--primary-blue: #a3b9f0;
		--secondary-blue: #203e83;
		--accent-blue: #2b5fda;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	scroll-behavior: smooth;
	@apply transition-colors;
}

.hash-span {
	position: absolute;
	left: 0;
	right: 0;
	margin-top: -100px;
	padding-bottom: 100px;
	display: block;
}

.canvas-loader {
	font-size: 10px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	text-indent: -9999em;
	animation: mulShdSpin 1.1s infinite ease;
	transform: translateZ(0);
}

.text-blue-gradient {
	background: #fca311;
	background: -webkit-linear-gradient(to right, #fca311, var(--accent-blue));
	background: linear-gradient(to right, #fca311, var(--accent-blue));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-full-blue-gradient {
	background: var(--primary-blue);
	background: -webkit-linear-gradient(to bottom var(--primary-blue), var(--accent-blue));
	background: linear-gradient(to bottom, var(--primary-blue), var(--accent-blue));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-empty-stroke {
	font-style: italic;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--primary-t);
	color: transparent;
}

.text-pink-gradient {
	background: #ec008c;
	background: -webkit-linear-gradient(to top, #ec008c, #fc6767);
	background: linear-gradient(to top, #ec008c, #fc6767);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-green-gradient {
	background: #11998e;
	background: -webkit-linear-gradient(to top, #11998e, #38ef7d);
	background: linear-gradient(to top, #11998e, #38ef7d);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-orange-gradient {
	background: #f12711;
	background: -webkit-linear-gradient(to top, #f12711, #f5af19);
	background: linear-gradient(to top, #f12711, #f5af19);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-white-gradient {
	background: #edf1f4;
	background: -webkit-linear-gradient(to top, #edf1f4, #c3cbdc);
	background: linear-gradient(to top, #edf1f4, #c3cbdc);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@keyframes mulShdSpin {
	0%,
	100% {
		box-shadow:
			0em -2.6em 0em 0em #ffffff,
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
			2.5em 0em 0 0em rgba(163, 127, 127, 0.2),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
	}
	12.5% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
			1.8em -1.8em 0 0em #ffffff,
			2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
	}
	25% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
			2.5em 0em 0 0em #ffffff,
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	37.5% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
			2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
			1.75em 1.75em 0 0em #ffffff,
			0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
			2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
			0em 2.5em 0 0em #ffffff,
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	62.5% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
			2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
			-1.8em 1.8em 0 0em #ffffff,
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	75% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
			2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
			-2.6em 0em 0 0em #ffffff,
			-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	87.5% {
		box-shadow:
			0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
			1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
			2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
			1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
			0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
			-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
			-2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
			-1.8em -1.8em 0 0em #ffffff;
	}
}
