*{box-sizing:border-box;margin:0;padding:0;transition:all .3s}body{background:radial-gradient(circle,#77ccf7 0%,#a570d7 100%);justify-content:center;align-items:flex-start;min-height:100vh;font-family:Capriola,cursive;display:flex}.App{flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.mainDiv{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;padding:0;display:flex}section{text-align:center;background-color:#ffffffd9;border:2px solid #77ccf780;border-radius:25px;flex-direction:column;justify-content:center;align-items:center;width:70%;padding:50px 100px;line-height:1.7;display:flex;box-shadow:inset 0 0 15px #ffffff80}nav{z-index:99;background-color:#fffffff2;flex-direction:row;justify-content:space-around;align-items:center;width:100%;height:15vh;display:flex;position:fixed;top:0;left:0;box-shadow:inset 0 0 15px #ffffff80}nav h1{font-family:Zen Dots,cursive;font-size:3rem}nav .menu{flex-direction:row;justify-content:space-evenly;align-items:center;width:50%;height:100%;display:flex}nav .menu .navbar-link{color:#8f9be7;text-align:center;justify-content:center;align-items:center;width:20%;height:100%;font-family:Zen Dots,cursive;font-size:1.2rem;text-decoration:none;display:flex}nav .menu .navbar-link:hover{color:#5d6ac0;background-color:#fff;box-shadow:inset 0 -10px 5px #0000001a}nav .menu .navbar-link.active{color:#5d6ac0;background-color:#fff;border-bottom:3px solid #5d6ac0;box-shadow:inset 0 -10px 5px #0003}.carousel-auto{z-index:-1;width:100%;height:100vh;padding:0;position:fixed;top:0;left:0;overflow:hidden}.carousel-image{object-fit:cover;opacity:0;will-change:opacity;width:100%;height:100%;transition:opacity 5s ease-in-out;position:absolute;inset:0}.carousel-image.is-active{opacity:1}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#5d6ac0 padding-box padding-box}html{scrollbar-width:thin;scrollbar-color:#5d6ac0 transparent}footer{color:#8f9be7;background-color:#fffffff2;flex-direction:row;justify-content:space-between;align-items:center;width:100%;min-width:99.3vw;height:10vh;margin-top:15vh;padding:20px;display:flex;position:static;bottom:0;left:0}@media only screen and (width<=1023px){nav{text-align:center;background-color:#fff;flex-direction:column;justify-content:space-between;height:auto;min-height:10vh}nav h1{margin:2vh 0;font-size:2.5rem}nav .menu{width:100%}nav .menu .navbar-link{background-color:#0000;width:100%}section{width:90%}}@media only screen and (width<=767px){nav h1{font-size:2rem}section{width:100%;margin-top:15vh;padding:25px 50px}footer{text-align:center;flex-direction:column;gap:10px;height:auto;min-height:10vh;font-size:.9rem}}.timer-display{flex-direction:column;justify-content:center;align-items:center;font-size:2.5rem;font-weight:700;display:flex}.timer-container{text-align:center;background-color:#ffffffd9;border:2px solid #77ccf780;border-radius:25px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:520px;padding:20px;display:flex;box-shadow:inset 0 0 15px #ffffff80}.timer-content{flex-direction:column;justify-content:center;align-items:center;display:flex}.time{background-color:#ffffffbf;border-radius:100%;justify-content:center;align-items:center;width:220px;height:220px;font-family:Zen Dots,cursive;font-size:3rem;display:flex}.progress-circle{background:conic-gradient(#fff6 var(--progress), #0b0 0deg);border-radius:50%;justify-content:center;align-items:center;width:250px;height:250px;margin-top:15px;display:flex;position:relative}.progress-circle:before{content:"";background:conic-gradient(#fff6 var(--progress), #fc0 0deg);opacity:0;border-radius:50%;transition:opacity .5s;position:absolute;inset:0}.progress-circle.paused:before{opacity:1}.progress-circle>*{z-index:1;position:relative}.timer-controls{flex-direction:row;justify-content:center;gap:30px;margin:20px 0;display:flex}.primary-button{color:#fff;border-radius:25px;justify-content:center;gap:10px;padding:10px 20px;font-size:1.6rem;display:flex}#start{background-color:#0b0}#start:hover{background-color:#0d0}#pause{background-color:#fc0}#pause:hover{background-color:#fd0}#reset{background-color:red}#reset:hover{background-color:#d00}.settings{flex-direction:column;align-items:center;display:flex}.input-settings{flex-direction:row;gap:10px;margin-top:10px;display:flex}.input-settings div{background-color:#ffffffbf;border-radius:10px;flex-direction:row;justify-content:center;align-items:center;gap:20px;height:25px;padding:16px 5px;display:flex}label{font-size:1.1rem}input{text-align:center;background:0 0;border:none;width:50px;font-family:Capriola,cursive;font-size:1.2rem}.set-button{color:#000;background-color:#ffffffbf;border-radius:25px;justify-content:center;gap:10px;margin-top:10px;padding:5px 10px;font-size:1.2rem;display:flex}.set-button:hover{background-color:#c8c8c8bf}.fade-out,.fade-in{transition:opacity .5s}.fade-out{opacity:0}.fade-in{opacity:1}@media only screen and (width<=767px){.timer-container{width:100%;margin-top:15vh}.timer-container .timer-controls{flex-direction:column;width:80%}.timer-container .timer-controls .primary-button{width:100%}.timer-container .input-settings{flex-direction:column;width:80%}.timer-container .set-button{width:80%}}