.card-body{background-color:#100e17;font-family:Open Sans,sans-serif}.card-container{justify-content:center;align-items:center;flex-wrap:wrap;margin:0 auto}.card,.card-container{position:relative;display:flex}.card{height:280px;width:200px;background-color:#ab0808;border-radius:10px;box-shadow:-1rem 0 3rem #000;margin-left:-30px}.card,.card:hover{transition:.4s ease-out}.card:hover{transform:translateY(-20px)}.card-title{color:white;font-weight:300;top:15px}.card-bar,.card-title{position:absolute;left:20px}.card-bar{top:100px;height:5px;width:150px}.card-filledbar{position:absolute;top:0;z-index:3;width:0;height:100%;background:rgb(0,154,217);background:linear-gradient(90deg,rgba(0,154,217,1),rgba(217,147,0,1) 65%,rgba(255,186,0,1));transition:.6s ease-out}.card-circle{position:absolute;top:150px;left:calc(50% - 60px)}.card-stroke{stroke:white;stroke-dasharray:360;stroke-dashoffset:360;transition:.6s ease-out}.card-circle svg{fill:#17141d;stroke-width:2px}@keyframes changeColor{0%{fill:#17141d}20%{fill:#2c3e50}40%{fill:#502c2e}60%{fill:#34495e}80%{fill:#4a3367}to{fill:#17141d}}.card:hover .stroke{stroke-dashoffset:100;transition:.6s ease-out}@media (max-width:768px){.card{margin-left:0;margin-bottom:20px}.card-container{flex-direction:column;align-items:center}}