:root{--shadow: rgb(0 0 0 / 35%) 0px 5px 15px}.App{font-family:monospace;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}a{text-decoration:none}.container{height:85vh;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;width:100%}.header{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%;font-size:1.3rem;font-weight:500;height:10vh;color:#4e4e4e}.active{color:#000;animation:animateFontSize .2s linear 0s;font-size:2rem}@keyframes animateFontSize{0%{font-size:1.3rem}25%{font-size:1.5rem}50%{font-size:1.7rem}75%{font-size:1.9rem}to{font-size:2rem}}.buttons{box-shadow:var(--shadow);padding:10px 25px;border-radius:7px;font-weight:500;display:flex;justify-content:center;min-width:32%;font-size:1.1rem}.buttons:hover{box-shadow:#00000073 0 5px 15px}.stopwatch{width:100%}.clock{width:210px;height:210px;font-size:2rem;font-weight:500;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow);margin:10px;flex-direction:column;position:relative;cursor:pointer}.clock-timer{position:absolute;top:40%;left:17%}.clock-border-ring{border:5px;background-image:linear-gradient(#9d00ff,#9d00ff,#2e91e5);border-radius:50%;height:95%;width:95%;display:flex;justify-content:center;align-items:center;animation:rotate-gradient 1s 1s infinite}.clock-border-ring-inner{background:#fff;border-radius:50%;height:94%;width:94%}@keyframes rotate-gradient{0%{transform:rotate(0)}10%{transform:rotate(36deg)}20%{transform:rotate(72deg)}30%{transform:rotate(108deg)}40%{transform:rotate(144deg)}50%{transform:rotate(180deg)}60%{transform:rotate(216deg)}70%{transform:rotate(252deg)}80%{transform:rotate(288deg)}90%{transform:rotate(324deg)}to{transform:rotate(360deg)}}.timer{width:100%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;height:100%}.button-row{display:flex;justify-content:space-evenly;align-items:center;flex-direction:row;margin:25px 0;width:100%}.timer-row{width:280px;height:120px;font-weight:500;border-radius:7px;box-shadow:var(--shadow);position:relative;cursor:pointer;display:flex;justify-content:center;align-items:center}.timer-input-title{display:flex;justify-content:center;align-items:center;margin:0 7px;z-index:1}.timer-input{font-size:1.8rem;font-weight:500;border:none;width:50px;text-align:center;border-bottom:2px solid rgb(97,97,97)}.timer-input:focus{font-size:1.8rem;font-weight:500;outline:none}span{font-size:1rem;font-weight:400;width:100%;color:#616161}.timer-border-ring{border-radius:7px;position:absolute;border:5px;background-image:linear-gradient(#9d00ff,#9d00ff,#2e91e5);height:97%;width:97%;display:flex;justify-content:center;align-items:center}.timer-border-ring-inner{background:#fff;height:92%;width:95%;border-radius:4px}