*{margin:0;padding:0;background:none;font-family:jura;color:rgb(var(--font))}:root{--background: 255,255,255;--font: 90,90,90;background-color:rgb(var(--background))}[data-theme=dark]{--background: 0,0,0;--font: 255,255,255}#background{position:absolute;top:0;left:0;z-index:-1}.header{font-size:1.6rem;letter-spacing:6px;display:flex;justify-content:space-between}.title{margin:.4rem 2rem}.theme{transition:.4s ease all;margin:.4rem 1.2rem;border:none}.title,.theme{padding:.5rem 1rem;border-radius:10rem}.theme-icon{width:50px}@media (max-width: 800px){.header{font-size:22px}.title,.theme{margin:.2rem 1rem}.theme-icon{width:40px}}.footer{font-size:1.2rem;text-align:center;height:2vh;letter-spacing:2px}@media (max-width: 800px){.footer{font-size:1rem}}.main{display:flex;flex-direction:column;justify-content:center;align-items:center;height:86vh}.tasks-container{border:solid gray 1px;border-radius:2rem;top:20%;position:absolute;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:rgba(var(--background),.5)}.tasks-container.visible{padding:1rem;width:max(320px,40vw);max-height:60vh;overflow:scroll;z-index:2}.task-button{border:none;background:none;height:1.4rem;width:1.4rem}.task{display:flex;justify-content:space-between;border-radius:2rem;margin:.5rem 0;padding:.2rem .7rem;font-size:clamp(20px,2vw,1.4rem)}.task-hover{background-color:rgba(var(--font),.1)}.task-input{border:none;outline:none;width:80%;font-size:clamp(20px,2vw,1.4rem)}.task-delete{height:1.6rem;width:1.6rem}.task-add{font-size:2rem;background:rgba(var(--font),.2);border-radius:2rem;text-align:center;width:100%;border:none}.timer-container{display:flex;flex-direction:column;align-items:center;justify-content:start;background:none;margin:2rem 0;max-width:100vw}.timer{font-family:Inconsolata;width:100%;font-size:10rem;text-align:center;margin:4rem 0}@media (max-width: 800px){.timer{font-size:6.2rem;margin:4rem 0}}.button{border:solid #606060 2px;border-radius:2rem;font-size:1.4rem;margin:1rem 2rem;padding:.6rem 2.5rem;letter-spacing:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.4s ease all;background:rgba(var(--background),.4)}.button:hover{transition:.4s ease all;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}@media (max-width: 800px){.button{font-size:20px;margin:.5rem 1rem;padding:.5rem 1.6rem}}