styles.css

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background: black; /* Solid black background */
    color: white;
    overflow: hidden; /* Disable scrolling for a cleaner look */
}

#swipe-area {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items at the top */
    align-items: center;
    overflow-y: auto;
}

ul {
    list-style: none;
    padding: 0;
    width: 100%;
    margin: 0;
}

li {
    background: rgba(255, 255, 255, 0.1); /* Slightly translucent background for item rows */
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh / 12 - 8px); /* Calculate height to fit 8 items */
    position: relative; /* For swipe delete functionality */
    transition: transform 0.3s ease; /* Smooth swipe transition */
}

li .delete {
    position: absolute;
    right: 10px;
    color: red;
    display: none; /* Hide delete button by default */
}

li.swiped-left {
    transform: translateX(-100%); /* Move item off-screen */
}

li.swiped-left .delete {
    display: block; /* Show delete button when swiped */
}

#input-box {
    position: fixed;
    top: -50px; /* Hide it above the screen */
    left: 0;
    right: 0;
    background: black; /* Same black background as the body */
    padding: 10px;
    display: flex;
    justify-content: center;
    transition: top 0.3s ease;
}

#task-input {
    width: 80%;
    padding: 10px;
    background: none; /* Remove background color */
    color: white; /* Text color */
    font-size: 16px;
    border: none; /* Remove borders */
    outline: none; /* Remove focus outline */
    text-align: center; /* Center align the input text */
    border-radius: 0px; /* No border radius */
}