style.css

* {
 box-sizing: border-box;
}

body {
 font-family: 'Inter', sans-serif;
 margin: 0;
 color: #333;
 background-color: #f0f5f7;
}

.button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

.button:hover {
 background-color: #3e8e41;
}

.button:active {
 background-color: #3e8e41;
 transform: scale(0.95);
}

.card {
 background-color: #f8f9fa;
 border-radius: 8px;
 box-shadow: 5px 5px 15px 0px rgb(0 0 0 / 20%);
}

.slide-up-enter-active {
 transition: all 0.3s ease-in-out;
}

.slide-up-leave-active {
 transition: all 0.3s ease-in-out;
}

.slide-up-enter, .slide-leave-to {
 transform: translateY(20px);
 opacity: 0;
}