body{display:grid;place-items:center;font-family:Space Mono,monospace}.container{position:relative;display:flex}.card{display:flex;justify-content:center;height:280px;width:200px;background-color:#fff;border-radius:10px;box-shadow:0 3px 10px #0003;transition:.4s ease-out;position:relative;left:0px}.card:not(:first-child){margin-left:-50px}.card:hover{transform:translateY(-20px);transition:.4s ease-out}.card:hover .filledbar{width:120px;transition:.4s ease-out}.card:hover~.card{position:relative;left:50px;transition:.4s ease-out}.title{color:#000;font-weight:300;font-family:Space Mono,monospace;font-size:15px;position:absolute;left:20px;top:15px;background-color:#e2f2fe}.bar{position:absolute;top:100px;left:20px;height:5px;width:150px}.emptybar{background-color:#fff;width:100%;height:100%}.filledbar{position:absolute;top:0px;z-index:3;width:0px;height:100%;background:rgb(0,154,217);background:linear-gradient(90deg,rgb(0,154,217) 0%,rgb(217,147,0) 65%,rgb(255,186,0) 100%);transition:.6s ease-out}#granim-canvas{position:absolute;display:block;width:100%;height:100%;top:0;right:0;bottom:0;left:0}.site-title{margin:50px;z-index:1;background:white;border-radius:15px;box-shadow:0 3px 10px #0003;padding:15px}.site-title h2{z-index:1;color:#000;background-color:#e2f2fe;font-size:40px;font-family:Space Mono,monospace}.desc{align-self:center;margin-top:90px;margin-bottom:30px;margin-left:20px;font-family:Space Mono,monospace}.desc p{font-size:8px}.mui-btn.mui-btn--raised{margin:20px;background-color:#e2f2fe;color:#6c7c88;box-shadow:0 3px 10px #0003}.mui-btn.mui-btn--raised:hover{color:#6c7c88}.cta{box-shadow:0 3px 10px #0003;font-family:Space Mono,monospace}.wrap{height:60px;position:relative;top:50%;transform:translateY(-50%);margin-top:15px}.box{padding:1px;height:60px;text-align:center}#create-button{width:160px;height:60px;background:darkslateblue;border:none;box-shadow:1px 1px 3px #000;cursor:pointer;position:relative;border-radius:6px}#create-button a{color:#fff;text-transform:uppercase;letter-spacing:1px}#create-button span .shape{height:60px;width:160px;position:absolute;top:0;left:0}#create-button span span{content:"";position:absolute;margin:auto;height:8px;width:2px;background:darkslateblue;opacity:0}#create-button span span:nth-of-type(1){top:-20px;left:0;right:0}#create-button span span:nth-of-type(2){bottom:-20px;left:0;right:0}#create-button span span:nth-of-type(3){top:0;bottom:0;left:-10px}#create-button span span:nth-of-type(4){top:0;bottom:0;right:-10px}#create-button span span:nth-of-type(5){top:-20px;left:-70%;right:0;transform:rotate(-30deg)}#create-button span span:nth-of-type(6){top:-20px;left:0;right:-70%;transform:rotate(30deg)}#create-button span span:nth-of-type(7){bottom:-20px;right:0;left:-70%;transform:rotate(30deg)}#create-button span span:nth-of-type(8){bottom:-20px;left:0;right:-70%;transform:rotate(-30deg)}#create-button.active{animation:bounce .3s ease-out 1}#create-button.active span span:nth-of-type(1){animation:anim1 .4s ease-out 1}#create-button.active span span:nth-of-type(2){animation:anim2 .4s ease-out 1}#create-button.active span span:nth-of-type(3){animation:anim3 .4s ease-out 1}#create-button.active span span:nth-of-type(4){animation:anim4 .4s ease-out 1}#create-button.active span span:nth-of-type(5){animation:anim5 .4s ease-out 1}#create-button.active span span:nth-of-type(6){animation:anim6 .4s ease-out 1}#create-button.active span span:nth-of-type(7){animation:anim7 .4s ease-out 1}#create-button.active span span:nth-of-type(8){animation:anim8 .4s ease-out 1}@keyframes bounce{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes anim1{0%{transform:scaleY(.5);opacity:0}50%{transform:translateY(-10px) scaleY(1.4);opacity:1}to{transform:translateY(-20px) scaleY(.5);opacity:0}}@keyframes anim2{0%{transform:scaleY(1);opacity:0}50%{transform:translateY(10px) scaleY(1.4);opacity:1}to{transform:translateY(20px) scaleY(.5);opacity:0}}@keyframes anim3{0%{transform:rotate(90deg) scaleX(.5);opacity:0}50%{transform:rotate(90deg) translateY(10px) scaleX(1.4);opacity:1}to{transform:rotate(90deg) translateY(20px) scaleX(.5);opacity:0}}@keyframes anim4{0%{transform:rotate(90deg) scaleX(.5);opacity:0}50%{transform:rotate(90deg) translateY(-10px) scaleX(1.4);opacity:1}to{transform:rotate(90deg) translateY(-20px) scaleX(.5);opacity:0}}@keyframes anim5{0%{transform:rotate(-30deg) scaleY(.5);opacity:0}50%{transform:rotate(-30deg) translateY(-8px) scaleY(1.4);opacity:1}to{transform:rotate(-30deg) translateY(-16px) scaleY(.5);opacity:0}}@keyframes anim6{0%{transform:rotate(30deg) scaleY(.5);opacity:0}50%{transform:rotate(30deg) translateY(-8px) scaleY(1.4);opacity:1}to{transform:rotate(30deg) translateY(-16px) scaleY(.5);opacity:0}}@keyframes anim7{0%{transform:rotate(30deg) scaleY(.5);opacity:0}50%{transform:rotate(30deg) translateY(8px) scaleY(1.4);opacity:1}to{transform:rotate(30deg) translateY(16px) scaleY(.5);opacity:0}}@keyframes anim8{0%{transform:rotate(-30deg) scaleY(.5);opacity:0}50%{transform:rotate(-30deg) translateY(8px) scaleY(1.4);opacity:1}to{transform:rotate(-30deg) translateY(16px) scaleY(.5);opacity:0}}