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

:root {
	--size: 120px;
	--font-size: 4rem;
}

.headline {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 15px;
}

.headline .cosmic {
	position: relative;
	cursor: pointer;
	height: var(--size);
	display: flex;
	justify-content: center;
	align-items: center;

	span {
		font-size: 150px;
		font-weight: 700;
		-webkit-text-stroke: 2px var(--color);
		color: transparent;
		transition: 0.5s;
	}

	&:hover span {
		opacity: 0;
	}
}

.headline .cosmic {
	&::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		font-size: 150px;
		height: 0;
		font-weight: 700;
		overflow: hidden;
		transition: 0.6s ease-in-out;
		text-align: center;
		line-height: var(--size);
		color: var(--color);
	}
	&:hover::before {
		height: 100%;
		filter: drop-shadow(0 0 2rem var(--color));
	}
}

.headline .space {
    width: 1.5rem;
    pointer-events: none;
}