<div class="wrapper">
	<h1>@web3senior</h1>
</div>
$avatar-size: 32px;
$body-background: #353535;

@font-face {
	font-family: "ubuntu";
	font-style: italic;
	font-weight: 300;
	src: local("Lato Light Italic"), local("Lato-LightItalic"),
		url(https://fonts.gstatic.com/s/ubuntucondensed/v8/u-4k0rCzjgs5J7oXnJcM_0kACGMtT-Dfqw.woff2)
			format("woff2");
}

body {
	height: 100vh;
	margin: 0;
	background-color: $body-background;
	font-family: "ubuntu", Arial, sans-serif;
	overflow-x: hidden;
	display: grid;
	place-items: center;
}

a {
	text-decoration: none;
	color: #9ca0b1;
}

.wrapper {
	text-align: center;
	h1 {
		color: #fff;
		font-size: 92px;
		text-transform: uppercase;
		font-weight: 700;
		font-family: "Josefin Sans", sans-serif;
		background: linear-gradient(to right,#095fab 10%, #25abe8 50%, #57d75b 60%);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;
		text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 1.5s linear infinite;
		display: inline-block;
	}
}

@keyframes textclip {
	to {
		background-position: 200% center;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.