cr angeidiarys #6 name

<style>

#yop, .letter {
position: absolute;
top: .925em;
z-index: 9;
}

#yop {
padding: 0.25em;
background: transparent;
z-index: 99;
font-family:funkhouse;
color: #ddbbdf;
-webkit-text-stroke: 0.5px #b687bf;
-webkit-filter: drop-shadow(0px 0px 1.5px #73508f);
left:9em;
opacity: 98%;
}

.letter {
font-size: 5.75em;
padding: 0.25em;
animation: float 1s linear infinite;
}

.first {
left: 0.16em;
}

.second {
left: 0.75em;
animation-delay: 0.25s;
}

.third {
left: 1em;
animation-delay: 0.15s;
}

.fourth {
left: 1.6em;
animation-delay: 0.5s;
}

@keyframes float { 0% {
transform: rotate(0) translateY(0); }
50% { transform: rotate(15deg) translateY(-10px); }
75% { transform: rotate(-15deg) translateY(0); }
100% { transform: rotate(0) translateY(0);
}
}

</style>
<body>
<div id="yop">
<span class="first letter">N</span><span class="second letter">e</span><span class="third letter">o</span><span class="fourth letter">!</span>
</div>