body {
	background-color: #121212;
	color: #fff;
	font-family: "Lucida Console", "Courier New", monospace;
}

.navlink {
	color: #eacff2;
	text-decoration: none;
}

.container {
	position: absolute;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.typewriter_wrapper {
	margin-top: 70px;
	width: fit-content;
	max-width: 90vh;
	font-family: "Lucida Console", "Courier New", monospace;
	height: fit-content;
	margin-bottom: 150px;
	animation:
		rotscale 4s infinite ease-in-out alternate;
}

@keyframes rotscale {
0% {
	transform:
		rotate(-2deg)
		scale(1);
}
100% {
	transform:
		rotate(3deg)
		scale(1.13);
}
}

.typewriter {
	font-size: 18px;
	line-height: 23px;
	color:#0000;
	--gradient-offset: 5%;
	background:
		linear-gradient(-90deg,#29e1c7 5px,#0000 0) 10px 0,
		linear-gradient(#ff9bd4fc 0 var(--gradient-offset), #35c1acfc 100%) 0 0;
	background-size:calc(var(--n)*1ch) 100%;
	-webkit-background-clip:padding-box,text;
	background-clip:padding-box,text;
	background-repeat:no-repeat;
	animation:
		/*b .7s infinite steps(1),*/
		t calc(var(--n)*.005s) steps(var(--n)) forwards,
		fz 1s infinite ease-in-out alternate,
		gr 1s infinite alternate;
}

@keyframes t{
	from { background-size:0 200% }
}
@keyframes b{
	50% { background-position:0 -100%, 0 0 }
}


@keyframes fz {
0% {
	font-size: 17px;
}
100% {
	font-size: 18px;
}
}
@keyframes gr {
0% {
	--gradient-offset: 5%;
}
12.5% {
	--gradient-offset: 10%;
}
25% {
	--gradient-offset: 17%;
}
37.5% {
	--gradient-offset: 27%;
}
50% {
	--gradient-offset: 40%;
}
62.5% {
	--gradient-offset: 53%;
}
75% {
	--gradient-offset: 63%;
}
87.5% {
	--gradient-offset: 70%;
}
100% {
	--gradient-offset: 75%;
}
}