@import"https://fonts.googleapis.com/css2?family=Pacifico&display=swap";body{height:100vh;display:flex;justify-content:center;align-items:center;position:relative}.title{font-family:Pacifico,cursive;font-size:clamp(36px,.6rem,100px);color:#fff;text-shadow:6px 4px #735b13}[class^=firework-]{position:absolute;width:.1rem;height:.1rem;border-radius:50%}.firework-1{animation:firework-sm 1.2s both infinite;animation-delay:1s;top:65%;left:80%}.firework-2{animation:firework-sm 1.2s both infinite;animation-delay:.3s;top:75%;left:40%}.firework-3{animation:firework-sm 1.2s both infinite;animation-delay:.9s;top:50%;left:65%}.firework-4{animation:firework-sm 1.2s both infinite;animation-delay:1.4s;top:35%;left:50%}.firework-5{animation:firework-md 1.2s both infinite;animation-delay:1.4s;top:35%;left:30%}.firework-6{animation:firework-sm 1.2s both infinite;animation-delay:1.1s;top:90%;left:20%}.firework-7{animation:firework-md 1.2s both infinite;animation-delay:.3s;top:35%;left:65%}.firework-8{animation:firework-md 1.2s both infinite;animation-delay:.4s;top:45%;left:50%}.firework-9{animation:firework-md 1.2s both infinite;animation-delay:1.1s;top:15%;left:25%}.firework-10{animation:firework-lg 1.2s both infinite;animation-delay:1.1s;top:15%;left:65%}.firework-11{animation:firework-md 1.2s both infinite;animation-delay:1.5s;top:90%;left:85%}.firework-12{animation:firework-md 1.2s both infinite;animation-delay:.8s;top:45%;left:70%}.firework-13{animation:firework-md 1.2s both infinite;animation-delay:.7s;top:80%;left:25%}.firework-14{animation:firework-md 1.2s both infinite;animation-delay:.2s;top:75%;left:55%}.firework-15{animation:firework-sm 1.2s both infinite;animation-delay:1.5s;top:75%;left:30%}@keyframes firework-sm{0%,to{opacity:0}10%,70%{opacity:1}to{box-shadow:-.5rem 0 #fff,.5rem 0 #fff,0 -.5rem #fff,0 .5rem #fff,.35rem -.35rem #fff,.35rem .35rem #fff,-.35rem -.35rem #fff,-.35rem .35rem #fff}}@keyframes firework-md{0%,to{opacity:0}10%,70%{opacity:1}to{box-shadow:-.7rem 0 #fff,.7rem 0 #fff,0 -.7rem #fff,0 .7rem #fff,.49rem -.49rem #fff,.49rem .49rem #fff,-.49rem -.49rem #fff,-.49rem .49rem #fff}}@keyframes firework-lg{0%,to{opacity:0}10%,70%{opacity:1}to{box-shadow:-.9rem 0 #fff,.9rem 0 #fff,0 -.9rem #fff,0 .9rem #fff,.63rem -.63rem #fff,.63rem .63rem #fff,-.63rem -.63rem #fff,-.63rem .63rem #fff}}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}.pin-code{background:#fff;font-family:Poppins;font-size:1.875rem;position:relative}.pin-code .pin-code-wrap{overflow:hidden;display:flex;padding:2.8rem 3rem;position:relative}.pin-code .pin-code-input{position:absolute;left:0;top:0;height:100%;width:100%;border:0;opacity:0;z-index:5}.pin-code .pin-code-digits{display:flex;align-items:center}.pin-code .pin-code-digits .digit{display:block;position:relative;width:1em;height:1em;text-align:center;color:#f25757;font-weight:700}.pin-code .pin-code-digits .digit>span{transform:scale(.8);transition:transform .3s ease,opacity .3s ease;display:block;transition-delay:.5s;opacity:0}.pin-code .pin-code-digits .digit:before{content:"";width:.375rem;height:1.3em;background:#f3bcc8;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.pin-code .pin-code-digits .digit:not(:last-of-type){margin-right:5.625rem}.pin-code .pin-code-digits .digit.filled:before{display:none}.pin-code .pin-code-digits .digit.filled>span{transform:scale(1);opacity:1}.pin-code .pin-code-digits:after{content:"";clear:both;display:table}.pin-code .digit-jumper{background:#f25757;height:1.3em;width:.375rem;position:absolute;margin:auto;left:0;top:0;bottom:0;transform-origin:left center;transform:translate(-100%)}.pin-code .digit-jumper.blinking{animation:blinking .95s infinite ease}.pin-code .pin-code-submit{left:100%;transform-origin:left center;color:#fff;position:absolute;border:0;height:100%;top:0;width:7.5rem;padding:0;transition:all .3s ease;transform:scaleX(0);cursor:pointer;background:#f25757;display:flex;align-items:center}.pin-code .pin-code-submit svg{width:2.5rem;margin:0 auto;opacity:0;transform:translate(-1rem);transition:all .3s .3s cubic-bezier(.31,.68,.13,1.69)}.pin-code .pin-code-submit svg path{fill:#fff}.pin-code .pin-code-submit.visible{transform:scaleX(1)}.pin-code .pin-code-submit.visible svg{opacity:1;transform:translate(0)}.pin-code .pin-code-submit:focus{outline:0}.pin-code.reset .digit-jumper{transform-origin:right center}.pin-code.reset .pin-code-submit svg{animation:turn .3s forwards ease}@keyframes blinking{0%,to{opacity:1}50%{opacity:0}}@keyframes turn{50%{transform:rotate(-180deg)}to{opacity:0;transform:rotate(-180deg) translate(1rem)}}body{display:flex;justify-content:center;align-items:center;margin:0;min-height:100vh;background:#f3bcc8}html{font-size:initial}