.snow{position:absolute;z-index:-1;top:0;width:10px;height:10px;background-color:var(--palette);border-radius:50%;filter:drop-shadow(0 0 10px white)}#uno{opacity:.8;transform:translate(50vw,-10px);animation:fall-1 25s linear infinite}@keyframes fall-1{50%{transform:translate(60vw,35vh)}to{transform:translate(40vw,90vh)}}#dos{opacity:.5;transform:translate(20vw,-10px) scale(.5);animation:fall-2 22s linear infinite}@keyframes fall-2{50%{transform:translate(35vw,45vh) scale(.5)}to{transform:translate(30vw,90vh) scale(.5)}}#tres{opacity:.3;transform:translate(70vw,35vh) scale(.2);animation:fall-3 23s linear infinite}@keyframes fall-3{50%{transform:translate(60vw,65vh) scale(.2)}to{transform:translate(65vw,90vh) scale(.2)}}#cuatro{opacity:1;transform:translate(90vw,10vh) scale(.7);animation:fall-4 21s linear infinite}@keyframes fall-4{50%{transform:translate(80vw,65vh) scale(.7)}to{transform:translate(85vw,90vh) scale(.7)}}#cinco{opacity:1;transform:translate(10vw,20vh) scale(.7);animation:fall-5 15s linear infinite}@keyframes fall-5{50%{transform:translate(30vw,65vh) scale(.7)}to{transform:translate(5vw,90vh) scale(.7)}}li{display:flex;align-items:center;gap:1em}#check{display:none}#check:checked~* .menu-aside,#check:checked~.aside{left:0}.inputField{position:relative}.inputField input{width:100%;height:50px;border-radius:6px;font-size:18px;padding:0 15px;border:2px solid #fff;color:#fff;outline:none;background:#191919}.inputField label{position:absolute;top:50%;left:15px;transform:translateY(-50%);color:#fff;font-size:15px;pointer-events:none;transition:.3s;background:#191919;width:60%}.inputField input:focus{border:2px solid #d8b4fe}.inputField input:focus~label,.inputField input:valid~label{top:0;font-size:14px;padding:0 15px;background:#191919}#favDialog{animation:show-modal .5s .7s both}#favDialog::backdrop{background-color:rgba(0 0 0/70%);backdrop-filter:blur(.2rem)}#favDialog[open]::backdrop{animation:show-backdrop .5s forwards}#favDialog[close]::backdrop{animation:hide-backdrop .5s forwards}#favDialog[close]{animation:hide-modal .7s forwards}@keyframes show-modal{0%{transform:translateY(60%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes show-backdrop{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes hide-backdrop{to{transform:translateY(100%)}}@keyframes hide-modal{to{transform:translateY(60%);opacity:0}}@keyframes loader{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}.loader:after,.loader:before{animation:loader 2s linear infinite;content:"";border:5px solid var(--color-usage);width:200px;height:200px;position:absolute;border-radius:50%}.loader:after{opacity:0;animation-delay:1s}.border-effect{overflow:hidden;display:grid;place-items:center}.border-effect:before{position:absolute;content:"";width:50%;height:180%;background:var(--color-usage);transform:rotate(45deg)}.card-bento>div{z-index:1;position:relative;margin:.75rem}.card-bento p{font-size:.875rem;line-height:1.25rem}.card-bento:after{position:absolute;content:"";inset:2px;background:#1e1d1d;border-radius:.375rem}.border-effect:hover:before{animation:animateborder 4s linear infinite}@keyframes animateborder{0%{transform:rotate(45deg)}to{transform:rotate(400deg)}}.border-effect:after{position:absolute;content:"";inset:2px;background:#1e1d1d;border-radius:.375rem}.preview-divisas{mask-image:linear-gradient(#1e1d1d 80%,transparent)}.zoom-in{animation:zoom-in linear both;animation-timeline:view();animation-range:entry 5% cover 20%}@keyframes zoom-in{0%{scale:.5;opacity:0;translate:0 100px}to{scale:1;opacity:1;translate:0 0}}.fifty{background-color:green}.thirty{background-color:blue}.twenty{background-color:pink}.circle-wrap{margin:50px auto;width:70px;height:70px;background:#404040;border-radius:50%;transform:scale(1.5)}.circle-wrap .circle .fill,.circle-wrap .circle .mask{width:70px;height:70px;position:absolute;border-radius:50%}.circle-wrap .circle .mask{clip:rect(0,70px,70px,40px)}.circle-wrap .circle .mask .fill{clip:rect(0,41px,70px,0);background-color:var(--color)}.circle-wrap .circle .fill,.circle-wrap .circle .mask.full{animation:fill 2s ease-in-out forwards}@keyframes fill{to{transform:rotate(var(--rotation))}}.circle-wrap .inside-circle{width:50px;height:50px;border-radius:50%;background-color:#202020;color:#fff;line-height:50px;text-align:center;margin-top:10px;margin-left:10px;position:absolute;z-index:100;font-weight:700;font-size:.7em}