body {
    font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins */
    background-color: #f4f4f4; /* Warna latar belakang yang lebih netral */
    color: #333; /* Warna teks */
    margin: 0; /* Menghilangkan margin default */
    padding: 20px; /* Memberikan padding pada body */
    opacity: 0; /* Mulai dengan opacity 0 untuk efek fade-in */
    animation: fadeIn 1s forwards; /* Menambahkan animasi fade-in */
}

@keyframes fadeIn {
    0% {
        opacity: 0; /* Mulai dari transparan */
        transform: scale(0.95); /* Sedikit lebih kecil */
    }
    100% {
        opacity: 1; /* Akhirnya menjadi terlihat */
        transform: scale(1); /* Ukuran normal */
    }
}

.container {
    text-align: center;
    margin: 50px auto; /* Margin otomatis untuk pusat */
    background-color: rgba(255, 255, 255, 0.9); /* Warna latar belakang kontainer dengan transparansi */
    padding: 30px; /* Padding di dalam kontainer */
    border-radius: 15px; /* Sudut melengkung */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Bayangan untuk efek kedalaman */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transisi halus */
    opacity: 0; /* Mulai dengan opacity 0 untuk efek fade-in */
    animation: fadeIn 1s forwards; /* Menambahkan animasi fade-in */
    animation-delay: 0.2s; /* Delay sebelum animasi dimulai */
}

.container:hover {
    transform: translateY(-5px); /* Efek angkat saat hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Bayangan lebih dalam saat hover */
}

.profile-image {
    width: 150px; /* Ukuran gambar */
    height: 150px; /* Ukuran gambar */
    border-radius: 50%; /* Membuat gambar bulat */
    object-fit: cover; /* Memastikan gambar tidak terdistorsi */
    border: 3px solid #ccc; /* Border untuk gambar */
    transition: border-color 0.2s ease; /* Transisi border */
}

.profile-image:hover {
    border-color: #007BFF; /* Warna border saat hover */
}

.name {
    margin-top: 15px; /* Jarak antara gambar dan nama */
    font-size: 20px; /* Ukuran font nama */
    font-weight: 600; /* Ketebalan font */
    color: #000; /* Warna nama */
}

h1 {
    font-size: 32px; /* Ukuran font untuk judul */
    margin-top: 40px; /* Jarak atas untuk judul */
    text-align: center; /* Pusatkan judul */
    color: #333; /* Warna judul */
}

.typing-effect {
    font-size: 18px; /* Ukuran font untuk paragraf */
    line-height: 1.8; /* Jarak antar baris */
    margin: 15px 0; /* Margin atas dan bawah untuk paragraf */
    text-align: center; /* Pusatkan paragraf */
    max-width: 600px; /* Lebar maksimum paragraf */
    margin-left: auto; /* Margin otomatis untuk pusat */
    margin-right: auto; /* Margin otomatis untuk pusat */
    opacity: 0; /* Mulai dengan opacity 0 untuk efek fade-in */
    animation: fadeIn 1s forwards; /* Menambahkan animasi fade-in */
    animation-delay: 0.2s; /* Delay sebelum animasi dimulai */
}