body{
    background-image: url('https://i.pinimg.com/originals/ac/54/a1/ac54a128942c750799c2c1fe144d2467.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    
}

.container {
     background-color: #b8c0ff;
    width: 40%;
    margin: auto; /* Center the container horizontally */
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow */
    margin-right: 5%;
    border-radius: 10px;
}


.heading{
    text-align: center;
    font-family: cursive
}


.input {
    display: flex; /* Display as a flex container */
    flex-direction: row; /* Layout children in a row */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-wrap: wrap; /* Allow content to wrap to the next line if needed */
    width: 100%;
    max-width: 600px; /* Limit the input section width */
    margin: auto; /* Center the input section within the container */
    padding: 10px;
    box-sizing: border-box; 
}

.text-input {
    box-sizing: border-box; 
    position: relative;
    flex:1;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    border: 1px solid black;
    border-radius: 10px;
    font-size: 16px;
     /* Add some space between the input field and the button */
}

.title-2 {
    font-size: 20pt;
    color: black; 
    font-family: cursive;
    text-align: left;
    margin-bottom: 10px; /* Add some space between the title-2 and the input fields */
    margin-left: 10px;
}

.save-button {
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #E74369;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box; 
    margin-left: 15px;
}


  /* .items-container {
    list-style-type: none; 
    padding: 0;
}

.items-container li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: disc; /* Use disc as the bullet point style */
    /* background-color: #f5f5f5;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 2px;
} */ 

/* Style for the "Done" and "Edit" buttons */
.displayed-items-container li button {
    padding: 8px;
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
}

.displayed-items-container li button:hover {
    background-color: #ddd;
}

.displayed-items-container li button.done {
    background-color:  #E74369;
    color: white;
    
}

.displayed-items-container li button.edit {
    background-color:  #E74369;
    color: white;
}

.button-container {
    display: flex;
    gap: 8px;
}

/* Add a margin to the button container for spacing */

.displayed-items-container li button.delete {
    background-color:  #E74369;
    color: white;
}


/* Your existing styles */

/* Style for the display container */
.display-container {
    background-color: white; /* Light gray background */
    width: 40%;
    margin: auto; /* Center the container horizontally */
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
    margin-top: 20px; /* Add some space between the input container and display container */
    margin-right: 5%;
}

.displayed-items-container {
    list-style-type: none;
    padding: 0;
    
}



.displayed-items-container li {
    background-color: #ffc2d1;/* Slightly darker background for list items */
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display:flex;
}

.displayed-items-container li span {
    font-size: 15px;
}

/* Add more styles as needed */


/* Add styles for the filter container */
.filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding: auto;
}

.filter-container label {
    margin-right: 25px;
    font-size: 20px;
    color: black;
    font-family: cursive;
}

/* Add some space between the input container and display container */
.display-container {
    margin-top: 18px; 
    background-color: #b8c0ff;
    width: 40%;
     /* Center the container horizontally */
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow */
    margin-right: 5%;
    border-radius: 10px;
    padding-top: 10px;
}





/* Define a breakpoint for small screens */
@media only screen and (max-width: 600px) {
    .container {
        width: 80%; /* Adjust container width for smaller screens */
    }
    
    .display-container {
        width: 80%; /* Adjust display container width for smaller screens */
    }
    
    .input {
        flex-direction: column; /* Change input fields to stack vertically */
        align-items: center; /* Stretch items to full width */
    }
    
    .text-input {
        width:100%;
        margin-bottom: 10px; /* Add some space between input fields */
    }
    .save-button {
        
            width: 45%; /* Set button width to 100% of container */
            margin-left: 0; /* Remove left margin */
        
    }
    .button-container {
        flex-direction: row; /* Arrange buttons vertically */
        gap: 5px; /* Add some space between buttons */
    }
    
    .filter-container {
        flex-direction: column; /* Arrange filter radio buttons vertically */
        align-items: center; /* Center filter radio buttons */
    }
    
    .filter-container label {
        margin-right: 0; /* Remove margin between filter radio buttons */
        margin-bottom: 5px; /* Add some space between filter radio buttons */
    }
}