:doodle {
@grid: 7 / 100vmax / inherit;
}
@even {
@shape: clover 5;
background: @pick(#475569, #ddd, #1d4ed8);
border-radius: 50%;
opacity: @rand(0.1, 0.2);
transform: scale(@r(0.1, 0.8));
animation: fall @rand(10s, 60s) linear infinite;
animation-delay: 0s;
}
@keyframes fall {
0% { transform: translateY(-20vh) translateX(@rand(-20vw, 20vw))
scale(@r(0.1, 0.8)); opacity: 0; }
50% { opacity: 0.3; }
100% { transform: translateY(120vh) translateX(@rand(-30vw, 30vw)) scale(@r(0.1, 0.8));
opacity: 0; }
}
@odd {
@shape: clover 3;
background: @pick(#475569, #e2e8f0, #1d4ed8);
border-radius: 40%;
opacity: @rand(0.1, 0.2);
transform: scale(@r(0.1, 0.8));
animation: fall @rand(10s, 60s) linear infinite;
animation-delay: 0s;
}
@keyframes fall {
0% { transform: translateY(-20vh) translateX(@rand(-20vw, 20vw))
scale(@r(0.1, 0.6)); opacity: 0; }
50% { opacity: 0.2; }
100% { transform: translateY(120vh) translateX(@rand(-30vw, 30vw)) scale(@r(0.1, 0.6));
opacity: 0; }
}
