body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ff9ce1; /* Pink background */
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #b4ff9c; /* Greenish border */
}

h1 {
    color: #333;
    text-align: center;
    background-color: #b4ff9c; /* Greenish header background */
    margin: -20px -20px 20px -20px; /* Align the background edge to edge */
    padding: 20px;
}

#searchBox {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 2px solid #ff9ce1; /* Pink border for the input box */
    outline: none;
}

    #searchBox:focus {
        border-color: #b4ff9c; /* Greenish border on focus */
    }

ul#songList {
    list-style-type: none;
    padding: 0;
}

    ul#songList li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        background-color: #f9fffc; /* Very light green background for list items */
    }

        ul#songList li:nth-child(odd) {
            background-color: #ecffe8; /* Slightly different green for alternating list items */
        }

        /* Adding a hover effect for list items */
        ul#songList li:hover {
            background-color: #b4ff9c; /* Greenish background on hover */
            cursor: pointer;
        }