.container {
  display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.card {
       background-color: #5e9646;
    color: #fff;
    
    border-radius: 0.5em;
    padding: 0.5em;
    margin: 0.2em;
    width: 200px;
    height: 90px;
    max-width: 18%;
    max-height: 90px;
    text-align: center;
    display: inline-block;
   
}

button {
  width: 60px;
  height: 40px;
}

.hidden {
  background-color: #ffcccb;
    color: #fff;
    box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5);
       clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* Hide Card 2 using a circular clip-path */
    transition: clip-path 0.3s; /* Add a clip-path transition for a smooth effect */
}

const card2 = document.querySelector("#card2");
const toggleButton = document.querySelector("#toggleButton");

toggleButton.addEventListener("click", () => {
  card2.classList.toggle("hidden");
});