/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

.question {
    margin-bottom: 20px;
}
/* Tombol Dasar */
.button {
    background-color: #007bff; /* Warna latar */
    color: white; /* Warna teks */
    padding: 10px 20px; /* Ruang dalam */
    border: none; /* Tanpa garis tepi */
    border-radius: 5px; /* Sudut membulat */
    cursor: pointer; /* Kursor menjadi pointer saat hover */
    font-size: 16px; /* Ukuran teks */
    transition: background-color 0.3s, transform 0.3s; /* Efek transisi */
}

/* Efek Hover */
.button:hover {
    background-color: #0056b3; /* Warna latar saat hover */
    transform: scale(1.05); /* Membesarkan tombol sedikit saat hover */
}

/* Efek Active (Saat Ditekan) */
.button:active {
    transform: scale(0.95); /* Memperkecil tombol sedikit saat ditekan */
}

/* Tombol Utama */
.button-primary {
    background-color: #28a745; /* Warna hijau */
}

/* Tombol Kedua */
.button-secondary {
    background-color: #6c757d; /* Warna abu-abu */
}

/* Tombol Berbahaya */
.button-danger {
    background-color: #dc3545; /* Warna merah */
}

/* Tombol Ukuran Kecil */
.button-small {
    padding: 5px 10px; /* Ruang dalam lebih kecil */
    font-size: 14px; /* Ukuran teks lebih kecil */
}

/* Tombol Ukuran Besar */
.button-large {
    padding: 15px 30px; /* Ruang dalam lebih besar */
    font-size: 18px; /* Ukuran teks lebih besar */
}