body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.activity {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 10px;
    border-left: 6px solid transparent; /* Tambahkan border kiri dengan warna transparan */
}

.activity:hover {
    border-left: 6px solid #3498db; /* Ubah warna border kiri saat hover */
}

.activity .icon {
    flex: 0 0 50px;
    margin-right: 20px;
    font-size: 24px;
    color: #333333;
    padding: 10px;
    border-radius: 50%; /* Membuat ikon menjadi lingkaran */
}

.activity .details h2 {
    margin: 0;
    font-size: 20px;
    color: #333333;
}

.activity .details p {
    margin: 5px 0 0 0;
    color: #666666;
}

/* Gaya untuk setiap kegiatan */
#activity-1 .icon {
    background-color: #ffcc00; /* Warna kuning */
}

#activity-2 .icon {
    background-color: #ff6666; /* Warna merah */
}

#activity-3 .icon {
    background-color: #66ccff; /* Warna biru muda */
}

#activity-4 .icon {
    background-color: #ff99cc; /* Warna pink */
}

#activity-5 .icon {
    background-color: #99ff99; /* Warna hijau muda */
}

#activity-6 .icon {
    background-color: #cc99ff; /* Warna ungu */
}

#activity-7 .icon {
    background-color: #ffcc99; /* Warna orange muda */
}

#activity-8 .icon {
    background-color: #ccccff; /* Warna lavender */
}

#activity-9 .icon {
    background-color: #99cc99; /* Warna hijau pucat */
}

#activity-10 .icon {
    background-color: #ffcccc; /* Warna merah muda */
}

#activity-11 .icon {
    background-color: #ccffcc; /* Warna hijau terang */
}

#activity-12 .icon {
    background-color: #ff99ff; /* Warna pink terang */
}

#activity-13 .icon {
    background-color: #ffff99; /* Warna kuning muda */
}

#activity-14 .icon {
    background-color: #ffccff; /* Warna ungu muda */
}

#activity-15 .icon {
    background-color: #99ffff; /* Warna biru pucat */
}

#activity-16 .icon {
    background-color: #ccff99; /* Warna hijau lemon */
}

#activity-17 .icon {
    background-color: #ff9966; /* Warna oranye terang */
}

#activity-18 .icon {
    background-color: #cccc99; /* Warna khaki */
}

#activity-19 .icon {
    background-color: #ffcc66; /* Warna oranye krem */
}

#activity-20 .icon {
    background-color: #99ccff; /* Warna biru muda */
}

#activity-21 .icon {
    background-color: #ff6699; /* Warna merah muda terang */
}

#activity-22 .icon {
    background-color: #ff9966; /* Warna oranye terang */
}

#activity-23 .icon {
    background-color: #ff6666; /* Warna merah terang */
}

#activity-24 .icon {
    background-color: #99ccff; /* Warna biru muda */
}

#activity-25 .icon {
    background-color: #ff99cc; /* Warna pink muda */
}

#activity-26 .icon {
    background-color: #66ccff; /* Warna biru terang */
}

#activity-27 .icon {
    background-color: #ccff99; /* Warna hijau lemon */
}

#activity-28 .icon {
    background-color: #ffff99; /* Warna kuning muda */
}

#activity-29 .icon {
    background-color: #ffcc99; /* Warna orange muda */
}

#activity-30 .icon {
    background-color: #cc99ff; /* Warna ungu */
}