:doodle {
@grid: 20;
@size: 100vmax;
grid-gap: 0px;
background: var(--orange);
font-family: 'Fira Code', monospace;
font-size: var(--font-size);
}
--mod:0;
will-change: transform;
background: var(--orange);
transition: .5s cubic-bezier(.175, .885, .32, 1.275);
transition-delay: @rand(300ms);
transform: rotate( calc( @r(-33deg, 33deg) * var(--mod) ) )
translate( calc( @r(-4px, 4px) * var(--mod) ), calc( @r(-4px, 4px) * var(--mod) ) );
:hover{
--mod: 1;
}
:after{
color: var(--font);
content: \@hex(@rand(0x0021, 0x007e));
}
@keyframes fading {
0% { opacity: 1; }
10% { opacity: 0.33; }
20% { opacity: 1; }
100% { opacity: 1; }
}
/*Name*/
@nth(134) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'S';
font-weight: 700;
color: var(--orange);
}
}
@nth(135) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(30s, 100s);
:hover{ --mod: 0; }
:after{
content: 'O';
font-weight: 700;
color: var(--orange);
}
}
@nth(136) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'U';
font-weight: 700;
color: var(--orange);
}
}
@nth(137) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'R';
font-weight: 700;
color: var(--orange);
}
}
@nth(138) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'C';
font-weight: 700;
color: var(--orange);
}
}
@nth(139) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'E';
font-weight: 700;
color: var(--orange);
}
}
@nth(154) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: '.';
font-weight: 700;
color: var(--orange);
}
}
@nth(155) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'H';
font-weight: 700;
color: var(--orange);
}
}
@nth(156) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'O';
font-weight: 700;
color: var(--orange);
}
}
@nth(157) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'R';
font-weight: 700;
color: var(--orange);
}
}
@nth(158) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'S';
font-weight: 700;
color: var(--orange);
}
}
@nth(159) {
background: var(--font);
animation: fading @rand(5s, 10s) infinite @rand(2s, 20s);
:hover{ --mod: 0; }
:after{
content: 'E';
font-weight: 700;
color: var(--orange);
}
}