html{height:100%}body{height:100%;margin:0;overflow:hidden;background:linear-gradient(to bottom,#202020,#111119)}.rain{position:absolute;left:0;width:100%;height:100%;z-index:2}.rain.back-row{display:none;z-index:1;bottom:60px;opacity:.5}body.back-row-toggle .rain.back-row{display:block}.drop{position:absolute;bottom:100%;width:15px;height:120px;pointer-events:none;animation:drop .5s linear infinite}@keyframes drop{0%{transform:translateY(0)}75%{transform:translateY(90vh)}to{transform:translateY(90vh)}}.stem{width:1px;height:60%;margin-left:7px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.25));animation:stem .5s linear infinite}@keyframes stem{0%{opacity:1}65%{opacity:1}75%{opacity:0}to{opacity:0}}.splat{width:15px;height:10px;border-top:2px dotted rgba(255,255,255,.5);border-radius:50%;opacity:1;transform:scale(0);animation:splat .5s linear infinite;display:none}body.splat-toggle .splat{display:block}@keyframes splat{0%{opacity:1;transform:scale(0)}80%{opacity:1;transform:scale(0)}90%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.toggles{position:absolute;top:0;left:0;z-index:3}.toggle{position:absolute;left:20px;width:50px;height:50px;line-height:51px;box-sizing:border-box;text-align:center;font-family:sans-serif;font-size:10px;font-weight:700;background-color:#fff3;color:#00000080;border-radius:50%;cursor:pointer;transition:background-color .3s}.toggle:hover{background-color:#ffffff40}.toggle:active{background-color:#ffffff4d}.toggle.active{background-color:#fff6}.splat-toggle{top:20px}.back-row-toggle{top:90px;line-height:12px;padding-top:14px}.single-toggle{top:160px}body.single-toggle .drop{display:none}body.single-toggle .drop:nth-child(10){display:block}