body {
            background-color: #100C08;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #32de84;
            font-family: sans-serif; /* Added for better typography */
        }

        h1 {
            margin-bottom: 20px; /* Added margin for spacing */
        }

        .top {
            display: flex;
            width: 90%; /* Occupy most of the screen width */
            max-width: 600px; /* Set a maximum width for larger screens */
            margin-bottom: 20px; /* Added margin for spacing */
        }

        .inp {
            flex-grow: 1; /* Input takes up available space */
            border-radius: 30px;
            height: 40px;
            padding: 0 15px; /* Added padding for better readability */
            border: none; /* Removed default border */
            background-color: #1a1613; /* slightly lighter background for input */
            color: #32de84;
        }

        .inp::placeholder {
            color: #666; /* Slightly lighter placeholder color */
        }


        .adder {
            border: none;
            height: 40px;
            width: 60px;
            border-radius: 20px;
            background-color: #32de84;
            color: #100C08;
            margin-left: 10px; /* Added margin for spacing */
            cursor: pointer; /* Indicate it's clickable */
        }

        .stc {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 600px; /* Set a maximum width for larger screens */
            min-height: 50vh; /* Changed min-height to prevent issues on smaller screens */
            border: 3px solid #32de84;
            border-radius: 20px;
            padding: 20px; /* Added padding for better spacing */
            margin-top: 30px;
        }

        .subTask {
            display: flex;
            flex-direction: row;
            justify-content: space-between; /* Space items evenly */
            align-items: center;
            color: #32de84;
            width: 100%; /* Occupy full width of container */
            margin-bottom: 10px; /* Added margin between tasks */
            padding: 10px; /* Added padding for better touch targets */
            border-bottom: 1px solid #32de84; /* Added separator line */
        }

        .subTask1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            font-size: 1.2rem;
            gap: 5px;
            flex-grow: 1; /* Allows the task text to expand */
            overflow-wrap: break-word; /* Prevents long words from overflowing */
        }

        .a {
            height: 25px;
            width: 25px;
            accent-color: #32de84; /* Change checkbox color */
            cursor: pointer; /* Indicate it's clickable */
        }

        .b {
            margin: 0; /* remove default margin */
        }

        .c {
            border: none;
            height: 35px; /* Slightly reduced height */
            width: 70px; /* Slightly reduced width */
            border-radius: 25px;
            background-color: #32de84;
            color: #100C08;
            cursor: pointer; /* Indicate it's clickable */
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 768px) { /* Tablet and smaller */
            .inp {
                width: calc(100% - 70px); /* Adjust input width for button */
            }

            .subTask1 {
                font-size: 1rem; /* Slightly smaller font size */
            }
        }

        @media (max-width: 480px) { /* Phone */
          .top{
            flex-direction: column;
          }
          .inp{
            width: 100%;
            margin-bottom: 10px;
          }
           .adder{
            margin-left: 0;
            width: 100%;
           }
        }