:root{--text-color:white;--secondary-text-color:black;--fallback-bg-color:#121212;--btn-border:1px solid #6e6e6e66;--card-border:1px solid #6e6e6e66;--btn-bg-color:#0003;--card-bg-color:#0003;--font-family:"Roboto", "Helvetica Neue", Arial, sans-serif}@font-face{font-style:normal;font-weight:400;src:url(/WebTasky/assets/fonts/Roboto-Regular.ttf)format("truetype");font-family:Roboto}body{background-image:url(/WebTasky/assets/images/arc.png);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-color:var(--fallback-bg-color);font-family:var(--font-family);margin:0;padding:0}main,header{text-align:center;align-items:center}h1,h2,h3,p{color:var(--text-color);font-family:var(--font-family)}li{text-align:left;padding-left:10px;list-style-type:none}.button{cursor:pointer;border:var(--btn-border);background-color:var(--btn-bg-color);color:#fff;font-family:var(--font-family);border-radius:10px;padding:12px 24px}.task-container{width:90%;max-width:500px;margin:0 auto;padding:0}.task-item{border:var(--card-border);background-color:var(--card-bg-color);border-radius:10px;margin:10px;padding:10px;transition:background-color .2s;position:relative}.task-item-content{word-break:break-word;padding:10px}.delete-button{cursor:pointer;width:95%;color:var(--text-color);font-weight:700;font-family:var(--font-family);background-color:#ff00004d;border:1px solid #ff00001a;border-radius:10px;justify-content:center;align-items:center;margin:5px auto;padding:8px;transition:background-color .2s;display:flex}.delete-button:hover{background-color:#f009}.delete-button img{width:25px;height:auto}.task-item:has(.delete-button:hover){background-color:#ff00004d!important}.modal{border:var(--card-border);background-color:var(--card-bg-color);width:90%;max-width:500px;color:var(--text-color);font-family:var(--font-family);border-radius:10px;padding:20px}.modal::backdrop{background:#00000080}.modal-button{cursor:pointer;border:var(--btn-border);background-color:var(--btn-bg-color);color:var(--text-color);border-radius:5px;margin-top:10px;padding:8px 16px}.modal-input{box-sizing:border-box;border:var(--card-border);background-color:var(--card-bg-color);width:100%;color:var(--text-color);border-radius:5px;margin-top:10px;padding:8px}
