*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;line-height:1.5;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}input,button,textarea,select{appearance:none;font:inherit}a{text-decoration:none;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}fieldset,input{border:0}body{font-family:Arial,Helvetica,sans-serif}footer p{margin-top:auto;padding:20px 0;text-align:center}main{display:flex;justify-content:center}.form_section h2{font-size:2.5rem;margin-bottom:20px}.signup_form{width:100%;max-width:400px;margin:0 auto}.auth-container{display:flex;height:100vh}.image_section{flex:1;overflow:hidden;width:100%;height:100%}.image_section img{width:100%;height:100%;object-fit:cover;opacity:65%}.form_section{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px}.form_section .logo{width:280px;margin-left:-60px}.login_form,.logo-container{width:100%;max-width:400px;margin:0 auto}.auth-label{display:block;font-size:1.2rem;margin-bottom:15px}.auth-input{color:#333;width:100%;padding:10px;font-size:1.2rem;border-bottom:2px solid #000;margin-bottom:10px}.auth-input:focus{outline:none}.auth-buttons{width:100%;padding:10px;font-size:1.2rem;background-color:#000;color:#fff;margin-bottom:20px;border:none;cursor:pointer;transition:background-color .3s ease}.auth-buttons:hover{background-color:#333}p{font-size:1rem;text-align:center}p span{color:#000;font-weight:700;text-decoration:underline;cursor:pointer}p span:hover{text-decoration:none}@media screen and (max-width:768px){.image_section{display:none}.form_section{flex:1;padding:30px}.form_section h2{font-size:2rem}.login_form,.signup_form,.logo-container{max-width:100%}}.logo{width:180px}.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 20px 0 0}li{border:2px solid #000;padding:0 20px;margin-block:10px;justify-content:space-between}.list-item{display:flex;flex-direction:row;align-items:center;gap:10px}.custom-checkbox{width:20px;height:20px;border:2px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background-color:#fff;transition:background-color .2s ease}.custom-checkbox.checked{background-color:#000;border-color:#000}.checkmark{color:#fff;font-size:14px;font-weight:700}.todo-text.completed{text-decoration:line-through;color:#999}.todo-text{padding:10px 0;flex-grow:1;font-size:1.2rem;color:#333;overflow-wrap:break-word;text-wrap:balance}.list-item input[type=checkbox]:checked~.todo-text{text-decoration:line-through;color:#999}button{background-color:transparent;border:none;cursor:pointer;transition:transform .2s ease}#todo-form{display:flex;flex-flow:row nowrap;align-items:center}form{gap:10px}.task-input-form input{color:#333;width:100%;padding:10px;font-size:1.2rem;border-bottom:2px solid #000;margin-bottom:10px}.task-input-form input:focus{outline:none}#add-button{padding:10px;background-color:#000;color:#fff;margin-bottom:20px;border:none;cursor:pointer;transition:background-color .3s ease}#add-button:hover{background-color:#333}.flex-row{display:flex;flex-flow:row nowrap;align-items:center}.bottom-items{padding:20px;font-size:.8rem;letter-spacing:.5px;align-items:baseline}.items-left{margin-right:80px}.filter{margin-right:40px}.filter input[type=radio]{position:absolute;opacity:0;height:0;width:0;cursor:pointer}.filter label{cursor:pointer;padding:0 10px}.filter label:hover{color:#999}.filter input[type=radio]:checked~span{color:#ccc}.clear{cursor:pointer;transition:color .2s ease}.clear:hover{color:#999}section{max-width:545px;width:100%}h1{font-size:2rem;margin-bottom:10px}