body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Memastikan body mengambil seluruh tinggi viewport */
}

main {
    flex-grow: 1; /* Memungkinkan main untuk mengambil ruang yang tersisa */
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: scale(1.05);
}

/* Media Queries for Responsiveness */
@media (max-width: 480px) {
    header h1 {
        font-size: 6vw; /* Ukuran font lebih besar pada layar kecil */
    }

    .card-title {
        font-size: 5vw; /* Ukuran font lebih besar untuk judul pada layar kecil */
    }

    .card-text {
        font-size: 4vw; /* Ukuran font lebih besar untuk deskripsi pada layar kecil */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    header h1 {
        font-size: 4vw; /* Ukuran font sedang pada layar menengah */
    }

    .card-title {
        font-size: 3vw; /* Ukuran font sedang untuk judul pada layar menengah */
    }

    .card-text {
        font-size: 2.5vw; /* Ukuran font sedang untuk deskripsi pada layar menengah */
    }
}

@media (min-width: 769px) {
    header h1 {
        font-size: 2.5rem; /* Ukuran font normal pada layar besar */
    }

    .card-title {
        font-size: 1.5rem; /* Ukuran font normal untuk judul pada layar besar */
    }

    .card-text {
        font-size: 1rem; /* Ukuran font normal untuk deskripsi pada layar besar */
    }
}