@import"https://fonts.googleapis.com/css2?family=Orbitron&display=swap";:root{--attendance-green: #1ac320ff;--attendance-red: #da1a0cff;--attendance-yellow: #d2a213ff;--attendance-orange: #e64e12ff;--attendance-gray: #363636ff;--background-dark: #101010;--container-dark: #1b1b1b;--card-dark: #202020;--text-primary: #c58a01;--text-secondary: #cfcfcf;--progress-bar-bg: #333;--progress-bar-color: #c58a01;--progress-bar-medical: #4ed008}*{margin:0;padding:0;font-family:Orbitron,monospace;letter-spacing:1.5px}body{display:flex;justify-content:center;align-items:center;background:var(--background-dark);padding-left:20px;padding-right:20px}main{display:flex;justify-content:center;align-items:center}#progress-container{display:inline-block;background:linear-gradient(0deg,var(--container-dark),#222,var(--container-dark));width:70%;padding:30px;border-radius:10px}@media (max-width: 900px){#progress-container{width:100%;padding:15px}}@media (max-width: 500px){#progress-container{width:450px;padding:15px}}@media (max-width: 450px){#progress-container{width:400px;padding:15px}}@media (max-width: 400px){#progress-container{width:350px;padding:15px}}.progress-container-hedding{font-size:30px;color:var(--text-primary);text-align:center;margin-bottom:20px}.username{font-size:15px;color:var(--text-secondary);letter-spacing:2px;margin-bottom:20px}.progress-card{background:linear-gradient(0deg,var(--card-dark),#222,#242424);padding:8px;margin-bottom:10px;border-radius:10px;box-shadow:0 4px 8px #0006;display:flex;justify-content:space-between;align-items:center}.course-title{font-size:12px;word-spacing:4px;letter-spacing:1.5px;color:gray}.progress-bar-container{display:flex;margin-right:5%;margin-left:5%;position:relative;background-color:var(--progress-bar-bg);width:300px;height:20px;transform:skew(30deg)}.progress-bar{position:relative;background-color:var(--progress-bar-color);width:0%;height:100%;transition:width .5s ease}.progress-text{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:15px;color:#000;transform:skew(-30deg)}.progress-bar-medical{position:relative;background-color:var(--attendance-green);transition:width .5s ease;height:98.75%}.container{position:relative;width:900px;display:flex;justify-content:space-around}.container .card{position:relative;width:250px;background:linear-gradient(0deg,var(--container-dark),#222,var(--container-dark));display:flex;justify-content:center;align-items:center;height:300px;border-radius:4px;text-align:center;overflow:hidden;transition:.5s}.container .card:hover{transform:translateY(-10px);box-shadow:0 15px 35px #00000080}.container .card:before{content:"";position:absolute;top:0;left:-50%;width:100%;height:100%;background:#ffffff08;pointer-events:none;z-index:1}.percent{position:relative;width:150px;height:150px;border-radius:50%;box-shadow:inset 0 0 50px #000;background:#222;z-index:1000}.percent .num{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%}.percent .num h2{color:#777;font-weight:700;font-size:40px;transition:.5s}.card:hover .percent .num h2{color:#fff;font-size:60px}.percent .num h2 span{color:#777;font-size:24px;transition:.5s}.card:hover .percent .num h2 span{color:#fff}.text{position:relative;color:#777;margin-top:20px;font-weight:700;font-size:18px;letter-spacing:1px;text-transform:uppercase;transition:.5s}.card:hover .text{color:#fff}.card:nth-child(1) svg circle:nth-child(2){stroke-dashoffset:44;stroke:#00ff43}@media print{.progress-bar-container{width:160px;margin-right:10px}}.page-enter{opacity:0;transform:translateY(20px)}.page-enter-active{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}.progress-card{opacity:0;transform:translateY(20px);animation:slideUpFade .5s forwards;animation-delay:var(--delay, 0s)}@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}.recovery-btn{background:none;border:none;color:var(--attendance-yellow);cursor:pointer;transition:color .2s ease}.recovery-btn:hover{color:var(--attendance-orange)}.check-button{padding:6px 12px;background-color:var(--attendance-orange);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;transition:background-color .2s}.check-button:hover{background-color:var(--attendance-yellow)}.feedback-container{margin:40px;padding:20px}@media (max-width: 600px){.feedback-container{margin:20px;padding:10px}}.spinnerOverlay{width:220px;height:220px;border:5px solid rgba(255,255,255,.2);border-top:5px solid var(--attendance-yellow);border-bottom:5px solid var(--attendance-yellow);border-radius:50%;position:absolute;animation:spin 1s linear infinite;transform:translateZ(0);backface-visibility:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 400px){.inputs-container{flex-direction:column;align-items:flex-start}.inputs-container .check-button{margin-left:0;margin-top:10px}}