:root{--baltic-blue:#22577a;--tropical-teal:#38a3a5;--mint-leaf:#57cc99;--light-green:#80ed99;--tea-green:#c7f9cc}body{background-color:var(--baltic-blue);font-family:Public Sans,sans-serif}input{background-color:var(--tropical-teal);width:44vw;color:var(--tea-green);border:none;border-radius:5px;padding:.5vw;font-size:2vw}button{background-color:var(--mint-leaf);width:fit-content;color:var(--baltic-blue);border:none;border-radius:5px;padding:.5vw;font-size:2vw}#addArea{justify-content:center;align-items:center;gap:1vw;display:flex;position:relative;top:15vh}li{color:var(--baltic-blue);width:80vw;background-color:var(--light-green);border-radius:2vh;align-items:center;height:10vh;margin:2vh;padding:1vh;font-size:2vw;list-style-type:none;display:flex}ul{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;top:20vh}#done{width:2vw;height:2vw;margin-left:auto}.button{margin:.5vw}.button:hover,.hoverBtn:hover{background-color:var(--tropical-teal);color:var(--tea-green);cursor:pointer;transition:all .2s ease-in-out;scale:1.1}input:hover{transition:all .2s ease-in-out;scale:1.05}#todoLi:hover{transition:all .2s ease-in-out;scale:1.03}@media only screen and (width<=400px){input{width:70vw;font-size:4vw}button{width:fit-content;font-size:4vw}li{width:90vw;height:fit-content;padding:2vh;font-size:4vw}}#remainingDiv{color:var(--baltic-blue);background-color:var(--mint-leaf);border-radius:1vw;padding:.5vh .5vw;position:absolute;top:5vh;left:1.5vw}#timeDiv{color:var(--baltic-blue);background-color:var(--mint-leaf);border-radius:1vw;padding:.5vh .5vw;position:absolute;top:5vh;right:1.5vw}