* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background: linear-gradient(145deg, #c0c0c0, #a1a1a1);
    min-height: 100vh;
    padding: 0 10px 0 10px;
}

h1 {
    font-size: 60px;
    margin: 50px auto 80px auto;
    text-align: center;
    font-family: "Playpen Sans", cursive;
    font-weight: 900;
    text-transform: uppercase;

    color: #eceded;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
        0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
        0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}

.container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 0 20px 0 20px;
    border-radius: 27px;

    background: linear-gradient(145deg, #c0c0c0, #a1a1a1);
    box-shadow: 7px 7px 14px #8f8f8f,
        -7px -7px 14px #d7d7d7;

    .search-input {
        display: flex;
        width: 100%;
        max-width: 450px;
        height: 50px;
        border-radius: 12px;
        margin: 50px auto;
        padding: 9px;
        font-family: "Playpen Sans", cursive;
        font-weight: 200;
        font-size: 20px;
        border: none;
        outline: none;

        background-color: transparent;
        box-shadow: inset 2px 2px 0px #7e7e7e,
            inset -2px -2px 2px #d9d9d9;

        &:focus-within {
            background: linear-gradient(145deg, #c0c0c0, #a1a1a1);
            box-shadow: 5px 5px 10px #7d7d7d,
                -5px -5px 10px #e9e9e9;
        }
    }

    .task-container {
        width: 100%;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        margin: 50px auto;
        gap: 20px;

        .task-item {
            width: 100%;
            min-height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 12px;
            transition: 0.3s ease;

            &:hover {
                transform: translateY(-10px);
                background: linear-gradient(145deg, #c0c0c0, #a1a1a1);
                box-shadow: 5px 5px 10px #7d7d7d,
                    -5px -5px 10px #e9e9e9;
            }

            .remove-btn {
                display: flex;
                width: 100%;
                max-width: 80px;
                height: 30px;
                margin-right: 10px;
                justify-content: center;
                align-items: center;
                font-family: "Playpen Sans", cursive;
                background-color: transparent;
                outline: none;
                border: none;
                transition: 0.3s ease;
                -webkit-tap-highlight-color: transparent;

                &:hover {
                    border-radius: 8px;
                    cursor: pointer;
                    transform: translateY(-1px);

                    background: transparent;
                    box-shadow: 4px 3px 2px #7d7d7d,
                        -3px -3px 6px #e9e9e9;
                }

                &:active {
                    border-radius: 8px;
                    box-shadow: inset 2px 2px 0px #7e7e7e,
                        inset -2px -2px 2px #d9d9d9;
                }
            }
        }

        .task-item span {
            display: inline-block;
            padding-left: 10px;
            margin-right: 10px;
            font-family: "Playpen Sans", cursive;
            font-weight: 200;
            font-size: 18px;
            pointer-events: none;
            color: #000;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .completed span {
            text-decoration: line-through;
            color: #807e7e;
        }

        h2 {
            font-family: "Playpen Sans", cursive;
            font-weight: 200;
            color: #5e5e5e;
            text-decoration: underline;
        }
    }

}