body, html {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        main {
            width: 100%;
            height: 100%;
        }
        #container {
            width: 90%;
            max-width: 800px;
            margin: 40px auto 0;
            padding: 20px 10px;
            background: var(--surface-primary);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow);
            overflow-y: auto;
            max-height: 80vh;
            overflow-x: hidden;
        }
       
        .inputContainer {
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 10px 30px;
            corner-shape: round;
            padding: 0;
            border-radius: var(--radius-sm);
        }
        
        #taskInput {
            width: 100%;
            padding: 8px ;
            font-size: 1.1rem;
            outline: none;
            background-color: transparent;
            border-color: var(--border);
        }
        #createTask {
            max-width: fit-content;
            border: none;
            border-left: 1px solid ;
            outline: none;
            padding: 8px 10px;
            font-weight: 600;
            font-size: 1rem;
            border: none;
            transition: all 0.5s ease;
        }

        #createTask:active {
            opacity: 0.5;
        }
        #createdTasks {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: clamp(1rem, 20vw, 1.2rem);
        }
        input[type="checkbox"] {
            width: 20px;
            margin-right: 14px;
            height: 20px;
        }
        .placeholder {
            text-align: center;
            font-size: 0.9rem;
            color: gray;
        }
        h1 {
            text-align: center;
        }
        #deleteTasks {
            background: var(--surface-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-sm);
color: var(--color);
transition: all 0.5s ease;
        }
        #deleteTasks:hover {
            background: var(--danger);
            color: #000000;
        }
        .deleteBtn {
            background: var(--surface-secondary);
            border-radius: 50%;
border: none;
margin-left: 10px;
        }

        .icon-bin {
  width: 27px;
  height: 27px;
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 2;
  transition: fill 0.2s, transform 0.2s;
}

.icon-bin:hover {
  fill: #e53935;
  transform: translateY(-2px);
}
.taskLabelContainer label {
    margin-right: var(--space-sm);
}
.taskLabelContainer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    background-color: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-sm);
}
#completedTasks {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    opacity: 0.5;
    text-decoration: line-through;
}