@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Space+Grotesk:wght@300..700&display=swap");

:root {
	--bg-color: #191825;
	--color-1: #30e3df;
	--color-2: #fce22a;
	--color-3: #f94a29;
	--color-4: #d61355;
	--border-color-space: 0.5rem;
}

body {
	display: flex;
  overflow: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: radial-gradient(circle, #1e1e2f, #111);
}

.title {
	font-size: 20vw;
	font-family: "Space Grotesk", serif;
	letter-spacing: var(--border-color-space);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 3rem;
	color: var(--bg-color);
	background: linear-gradient(
		90deg,
		var(--color-1),
		var(--color-2),
		var(--color-3),
		var(--color-4)
	);
	background-clip: text;
	-webkit-text-stroke: var(--border-color-space) transparent;
	filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7));
}