.loader{height:35vh;overflow:hidden;position:relative;text-align:center;--dark:#18181b;--light:#fff}.loader .loader-body{animation:speeder .4s linear infinite;left:47%;margin-left:-50px;position:absolute;top:50%}.loader .loader-body>span{background:var(--dark);border-radius:2px 10px 1px 0;height:5px;left:60px;position:absolute;top:-19px;width:35px}.dark .loader .loader-body>span{background:var(--light)}.loader .base span{border-bottom:6px solid transparent;border-right:100px solid var(--dark);border-top:6px solid transparent;height:0;position:absolute;width:0}.dark .loader .base span{border-right:100px solid var(--light)}.loader .base span:before{background:var(--dark);border-radius:50%;content:"";height:22px;position:absolute;right:-110px;top:-16px;width:22px}.dark .loader .base span:before{background:var(--light)}.loader .base span:after{border-bottom:16px solid transparent;border-right:55px solid var(--dark);border-top:0 solid transparent;content:"";height:0;position:absolute;right:-98px;top:-16px;width:0}.dark .loader .base span:after{border-right:55px solid var(--light)}.loader .face{background:var(--dark);border-radius:20px 20px 0 0;height:12px;position:absolute;right:-125px;top:-15px;transform:rotate(-40deg);width:20px}.dark .loader .face{background:var(--light)}.loader .face:after{background:var(--dark);border-radius:0 0 0 2px;content:"";height:12px;position:absolute;right:4px;top:7px;transform:rotate(40deg);transform-origin:50% 50%;width:12px}.dark .loader .face:after{background:var(--light)}.loader .loader-body>span>span:first-child,.loader .loader-body>span>span:nth-child(2),.loader .loader-body>span>span:nth-child(3),.loader .loader-body>span>span:nth-child(4){animation:fazer1 .2s linear infinite;background:var(--dark);height:1px;position:absolute;width:30px}.dark .loader .loader-body>span>span:first-child,.dark .loader .loader-body>span>span:nth-child(2),.dark .loader .loader-body>span>span:nth-child(3),.dark .loader .loader-body>span>span:nth-child(4){background:var(--light)}.loader .loader-body>span>span:nth-child(2){animation:fazer2 .4s linear infinite;top:3px}.loader .loader-body>span>span:nth-child(3){animation:fazer3 .4s linear infinite;animation-delay:-1s;top:1px}.loader .loader-body>span>span:nth-child(4){animation:fazer4 1s linear infinite;animation-delay:-1s;top:4px}@keyframes fazer1{0%{left:0}to{left:-80px;opacity:0}}@keyframes fazer2{0%{left:0}to{left:-100px;opacity:0}}@keyframes fazer3{0%{left:0}to{left:-50px;opacity:0}}@keyframes fazer4{0%{left:0}to{left:-150px;opacity:0}}@keyframes speeder{0%{transform:translate(2px,1px) rotate(0)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}.loader .longfazers{height:100%;position:absolute;width:100%}.loader .longfazers span{background:var(--dark);height:2px;position:absolute;width:20%}.dark .loader .longfazers span{background:var(--light)}.loader .longfazers span:first-child{animation:lf .6s linear infinite;animation-delay:-5s;top:20%}.loader .longfazers span:nth-child(2){animation:lf2 .8s linear infinite;animation-delay:-1s;top:40%}.loader .longfazers span:nth-child(3){animation:lf3 .6s linear infinite;top:60%}.loader .longfazers span:nth-child(4){animation:lf4 .5s linear infinite;animation-delay:-3s;top:80%}@keyframes lf{0%{left:200%}to{left:-200%;opacity:0}}@keyframes lf2{0%{left:200%}to{left:-200%;opacity:0}}@keyframes lf3{0%{left:200%}to{left:-100%;opacity:0}}@keyframes lf4{0%{left:200%}to{left:-100%;opacity:0}}