body{
    margin: 0;
    padding: o;
    background-color: antiquewhite;
    

}
h1{
    text-align: center;
}
.container{
    grid-template-columns: 1fr 1fr;
    display: flex;
}
.Add-Contact{
    flex: 1;
    max-width: 25%;
    padding: 20px;
    border: 1px solid #0a0a0a;
    border-radius:8px;
    background-color: rgb(163, 149, 130);
    margin:3% ;

}
.btn-add{
    margin-top: 15px;
    padding:10px;
    background-color: #5e5c59;
    color:white;
    border:none;
    border-radius:4px;
    cursor: pointer;
}
button:hover{
    background-color: rgb(31, 31, 19);
}
.contactList{
   flex:1;
   padding: 2%;
    gap:15px;
    margin-right: 10%;
    background-color: rgb(163, 147, 112);
    border:none;
    border-radius: 4px;
    padding-bottom: 0;


}
footer{
    background-color: rgb(234, 246, 248);
    padding: 10px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    opacity: 0.9;
    font-size: small;
    margin-top: 10%;
}
/* Contact card styling */
.contact-item {
    background-color: #fdf6e3;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    padding: 15px;
    margin: 15px auto;
    
    box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: "Georgia", serif; 
}

.contact-item:hover {
    transform: translateY(-3px);
    box-shadow: 4px 6px 12px rgba(0,0,0,0.15);
}

.contact-item strong {
    font-size: 1.2em;
    color: #3b2f2f;
    display: block;
    margin-bottom: 8px;
}

/* Delete button inside cards */
.contact-item button {
    margin-top: 10px;
    background-color: #b23b3b;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.contact-item button:hover {
    background-color: #7a2626;
}