@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap";.App{text-align:center;padding:20px;background-color:#1a1b2e;color:#fff;height:92vh}.timer-container{display:flex;justify-content:space-evenly;gap:20px}@media (max-width: 768px){.timer-container{flex-direction:column;align-items:center}}.timer{font-family:Open Sans,sans-serif;background-color:#26273d;border-radius:25px;padding:20px;width:300px;text-align:center;box-shadow:0 4px 10px #0003}.timer-title{color:#a2a4cb;font-size:18px;margin-bottom:20px}.timer-circle{position:relative;width:200px;height:200px;margin:0 auto 20px}.progress-ring{position:relative;width:100%;height:100%;border-radius:50%;background-color:#545576}.progress-ring__circle{width:100%;height:100%;border-radius:50%;border:10px solid transparent;box-sizing:border-box;position:absolute;top:0;left:0;background:conic-gradient(#67cb88 var(--progress),transparent 0%)}.timer-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background-color:#26273d;border-radius:50%;width:90%;height:90%;display:flex;flex-direction:column;justify-content:center}.time{font-size:36px;font-weight:600;color:#fff}.time-left{font-size:14px;color:#a2a4cb;margin-top:5px}.timer-controls{display:flex;justify-content:space-between;margin-top:20px}.timer-controls button{background-color:transparent;border:1px solid #606170;color:#fff;padding:8px 16px;border-radius:20px;cursor:pointer;transition:background-color .3s,color .3s;font-size:14px}.timer-controls button:hover:not(:disabled){background-color:#ffffff1a}.timer-controls button:disabled{opacity:.5;cursor:not-allowed}@keyframes completed-animation{0%{background:conic-gradient(#67cb88 100%,transparent 100%)}50%{background:conic-gradient(#cb6767 100%,transparent 100%)}to{background:conic-gradient(#67cb88 100%,transparent 100%)}}.timer-circle.completed .progress-ring__circle{animation:completed-animation 2s linear infinite}.progress-ring__circle{background:conic-gradient(#67cb88 var(--progress),transparent 0);border-radius:50%}.congrats-message{background-color:#67cb88;color:#fff;padding:15px;border-radius:10px;animation:fadeInOut 3s ease-in-out}.congrats-message-level-text{font-size:1rem;font-weight:700;color:#545576}@keyframes fadeInOut{0%,to{opacity:0}10%,90%{opacity:1}}@keyframes alternateColors{0%{stroke:#67cb88}50%{stroke:#ff4c4c}to{stroke:#67cb88}}.alternating-color{animation:alternateColors 1s linear infinite}.timer-form{font-family:Open Sans,sans-serif;background-color:#26273d;border-radius:25px;padding:20px;width:300px;box-shadow:0 4px 10px #0003}.timer-form h3{color:#a2a4cb;font-size:18px;margin-bottom:15px}.timer-form input{width:90%;padding:10px;margin-bottom:10px;background-color:#545576;border:none;border-radius:20px;color:#fff;font-size:14px}.timer-form input::placeholder{color:#a2a4cb}.timer-form button{width:70%;padding:10px;margin-top:.5rem;background-color:#67cb88;border:none;border-radius:20px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s}.timer-form button:hover{background-color:#5ab777}.timer-form button:disabled{background-color:#4a4a5e;cursor:not-allowed}.timer-form button:disabled:hover{background-color:#4a4a5e}@media (max-width: 768px){.timer-form{width:90%;max-width:300px}}