:root{--overlay: rgb(0,0,0,.7);--textcolor:#ffff;--btncolor:rgb(0,0,0,.7);--btndark:#000000}*{box-sizing:border-box;margin:0;padding:0}body{margin:auto;font-family:-apple-system,BlinkMacSystemFont,sans-serif;overflow:auto;background:linear-gradient(315deg,#65005e 3%,#3c84ce 38%,#30eee2,#ff1919 98%);animation:gradient 15s ease infinite;background-size:400% 400%;background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes gradient{0%{background-position:0% 0%}50%{background-position:100% 100%}to{background-position:0% 0%}}.wave{background:#ffffff40;border-radius:1000% 1000% 0 0;position:fixed;width:200%;height:12em;animation:wave 10s -3s linear infinite;transform:translateZ(0);opacity:.8;bottom:0;left:0;z-index:-1}.wave:nth-of-type(2){bottom:-1.25em;animation:wave 18s linear reverse infinite;opacity:.8}.wave:nth-of-type(3){bottom:-2.5em;animation:wave 20s -1s reverse infinite;opacity:.9}@keyframes wave{2%{transform:translate(1)}25%{transform:translate(-25%)}50%{transform:translate(-50%)}75%{transform:translate(-25%)}to{transform:translate(1)}}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ul{list-style-type:none}a{text-decoration:none;color:#fff;transition:color .3s ease}.btn{padding:10px 15px;font-size:.8rem;color:var(--textcolor);font-weight:500;text-transform:uppercase;background-color:var(--btncolor);border:1px solid var(--btncolor);border-radius:4px;cursor:pointer}.btn:hover{background-color:var(--btndark);border:1px solid var(--btndark);font-size:.9rem}.App{text-align:center}.hero{width:100%;height:80vh;display:flex;justify-content:center;align-items:center}.hero .card{width:90%;max-height:80%;max-width:440px;color:#fff;text-align:center;padding:50px 35px;border:1px solid rgba(255,255,255,.3);background:#fff3;border-radius:16px;box-shadow:0 4px 30px #0003;display:flex;flex-direction:column}.card img{max-width:45%;height:auto;border-radius:12px;margin:none;box-shadow:0 4px 30px #0003;background-color:#f0f8ff6b}.card h1{font-size:15px;font-weight:200;margin-top:2px;text-transform:uppercase;color:#fff;text-shadow:0 0 10px #00000075,0 0 20px #000000,0 0 30px #000000}.card h2{font-size:23px;font-weight:200;margin-top:2px;text-transform:uppercase;color:#fff;text-shadow:0 0 10px #00000075,0 0 20px #000000,0 0 30px #000000}.hero .card .progress-value{box-shadow:0 10px 40px -10px #000;border-radius:100px;background:#000;width:295px;padding:.5rem;margin:1.1rem auto;z-index:1;min-width:50px;padding:18px}.hero .card .progress-value2{animation:load2 3s normal forwards;box-shadow:0 10px 40px -10px #fff;border-radius:100px;background:red;height:30px;margin:-15px -15px 2px;width:0;left:auto;max-width:80px;position:absolute}@keyframes load2{0%{width:0}to{width:14%}}@media screen and (max-width:1000px){@keyframes load2{0%{width:0}to{width:20%}}.hero .card .progress-value{max-width:220px}}