.App{width:100%;min-height:100vh;display:flex;justify-content:center;background-repeat:no-repeat;background-size:100% 40vh;padding:60px 0 0}.light{background-image:url(/assets/bg-desktop-light.c99caf89.jpg);background-color:var(--VeryLightGrayishBlue)}.dark{background-image:url(/assets/bg-desktop-dark.cf72eaad.jpg);background-color:var(--VeryDarkBlue)}.container{max-width:500px;width:100%;padding:0 1.5rem}.box{display:flex;justify-content:space-between;color:#fff}.box h1{font-size:clamp(22px,4.5vw,40px);font-weight:700;letter-spacing:8px}.box svg{font-size:25px;cursor:pointer}form{width:100%;margin:2rem 0 0;height:50px;display:flex;border-radius:5px}.dark_form{background-color:var(--VeryDarkDesaturatedBlue)}.light_form{background-color:#fff}form input{width:90%;border:none;padding:0 0 0 1rem;outline:none;background:transparent;font-size:clamp(14px,1.5vw,17px)}.dark_text{color:var(--VeryLightGray)}.light_text{color:var(--VeryDarkGrayishBlue3)}form button{width:10%;display:flex;justify-content:center;align-items:center;background:transparent;border:none;cursor:pointer}form button svg{font-size:30px;color:var(--BrightBlue)}main{margin:1.5rem 0 0;border-radius:5px}.dark_main{background-color:var(--VeryDarkDesaturatedBlue);box-shadow:0 10px 30px 20px #0003}.light_main{background-color:#fff;box-shadow:0 10px 30px 20px #00000017}ul{width:100%;height:450px;border-radius:5px;overflow-y:auto}ul::-webkit-scrollbar{display:none}.footer{width:100%;height:45px;display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:0 1.2rem}.dark_footer{border-top:1px solid var(--VeryDarkGrayishBlue1);color:var(--DarkGrayishBlue2)}.light_footer{border-top:1px solid var(--LightGrayishBlue1);color:var(--DarkGrayishBlue1)}.clear_completed{cursor:pointer}.clear_completed:hover{color:var(--BrightBlue)}.todo{display:flex;width:100%;justify-content:space-between;align-items:center;padding:1rem;cursor:pointer}.todo_dark{border-bottom:1px solid var(--VeryDarkGrayishBlue1)}.todo_light{border-bottom:1px solid var(--LightGrayishBlue1)}.toggle_text{display:flex;align-items:center}.toggle_btn{width:25px;height:25px;border-radius:50%;cursor:pointer}.toggle_btn svg{color:#fff;font-size:20px}.toggle_btn_dark{border:1px solid var(--VeryDarkGrayishBlue3)}.toggle_btn_light{border:1px solid var(--VeryLightGrayishBlue)}.todo input{width:300px;background:transparent;border:none;outline:none;margin:0 0 0 1rem;font-size:clamp(14px,1.5vw,17px);word-wrap:break-word}.todo input.dark{color:var(--VeryLightGrayishBlue)}.todo input.light{color:var(--VeryDarkGrayishBlue3)}.actions{display:flex;align-items:center}.actions button{border:none;font-size:20px;transition:.3s}.actions button:hover{transform:scale(1.15)}*{padding:0;margin:0;box-sizing:border-box}:root{--BrightBlue: hsl(220, 98%, 61%);--CheckBackground: linear-gradient( 135deg, hsl(192, 100%, 67%), hsl(280, 87%, 65%) );--VeryLightGray: hsl(0, 0%, 98%);--VeryLightGrayishBlue: hsl(236, 33%, 92%);--LightGrayishBlue1: hsl(233, 11%, 84%);--DarkGrayishBlue1: hsl(236, 9%, 61%);--VeryDarkGrayishBlue1: hsl(235, 19%, 35%);--VeryDarkBlue: hsl(235, 21%, 11%);--VeryDarkDesaturatedBlue: hsl(235, 24%, 19%);--LightGrayishBlue2: hsl(234, 39%, 85%);--LightGrayishBlueHover: hsl(236, 33%, 92%);--DarkGrayishBlue2: hsl(234, 11%, 52%);--VeryDarkGrayishBlue2: hsl(233, 14%, 35%);--VeryDarkGrayishBlue3: hsl(237, 14%, 26%);--FontSize: 18px;--fontFamily: "Josefin Sans", sans-serif}body{font-family:var(--fontFamily);font-size:var(--FontSize);max-width:100vw}li{list-style-type:none}button{display:flex;justify-content:center;align-items:center;background:transparent}