<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.playful span {
position: relative;
color: #5362f6;
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
6px 6px #e485f8;
animation: scatter 1.75s infinite;
}
.playful span:nth-child(2n) {
color: #ed625c;
text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063,
0.75px 0.75px #f2a063, 1px 1px #f2a063, 1.25px 1.25px #f2a063,
1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063, 2px 2px #f2a063,
2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063,
3.75px 3.75px #f2a063, 4px 4px #f2a063, 4.25px 4.25px #f2a063,
4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063, 5px 5px #f2a063,
5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
6px 6px #f2a063;
animation-delay: 0.3s;
}
.playful span:nth-child(3n) {
color: #ffd913;
text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9,
0.75px 0.75px #6ec0a9, 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9,
1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9, 2px 2px #6ec0a9,
2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9,
3.75px 3.75px #6ec0a9, 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9,
4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9, 5px 5px #6ec0a9,
5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
6px 6px #6ec0a9;
animation-delay: 0.15s;
}
.playful span:nth-child(5n) {
color: #555bff;
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
6px 6px #e485f8;
animation-delay: 0.4s;
}
.playful span:nth-child(7n),
.playful span:nth-child(11n) {
color: #ff9c55;
text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555,
0.75px 0.75px #ff5555, 1px 1px #ff5555, 1.25px 1.25px #ff5555,
1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555, 2px 2px #ff5555,
2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555,
3.75px 3.75px #ff5555, 4px 4px #ff5555, 4.25px 4.25px #ff5555,
4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555, 5px 5px #ff5555,
5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
6px 6px #ff5555;
animation-delay: 0.25s;
}
@keyframes scatter {
0% {
top: 0;
}
50% {
top: -10px;
}
100% {
top: 0;
}
}
body {
background-color: #e4fff7;
}
h1 {
font-size: 65px;
text-transform: uppercase;
font-family: "Archivo Black", "Archivo", sans-serif;
font-weight: normal;
display: block;
width: 666px;
max-width: 80vw;
min-height: 90px;
height: auto;
text-align: center;
margin: 10rem auto;
margin: calc(50vh - 5rem) auto;
}
</style>
</head>
<body>
<h1 class="playful" aria-label="Wash your hands">
<span aria-hidden="true">W</span><span aria-hidden="true">a</span
><span aria-hidden="true">s</span><span aria-hidden="true">h</span
><span aria-hidden="true"> </span><span aria-hidden="true">y</span
><span aria-hidden="true">o</span><span aria-hidden="true">u</span
><span aria-hidden="true">r</span><span aria-hidden="true"> </span
><span aria-hidden="true">h</span><span aria-hidden="true">a</span
><span aria-hidden="true">n</span><span aria-hidden="true">d</span
><span aria-hidden="true">s</span><span aria-hidden="true">!</span>
</h1>
</body>
</html>
