* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1c1c3c, #3f4f9d);
    color: #fff;
}

.container {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    max-width: 400px;
}

.profile-photo {
    width: 120px; /* Lebar frame */
    height: 120px; /* Tinggi frame */
    margin: 0 auto 1rem; /* Margin bawah untuk jarak dengan elemen lain */
    overflow: hidden; /* Menghindari gambar keluar dari frame */
    border-radius: 50%; /* Membuat frame menjadi bulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan di sekitar frame */
    display: flex; /* Menggunakan flexbox untuk memusatkan gambar */
    justify-content: center; /* Memusatkan gambar secara horizontal */
    align-items: center; /* Memusatkan gambar secara vertikal */
    background-color: #fff; /* Warna latar belakang frame */
}

.profile-photo img {
    width: 100%; /* Lebar gambar 100% dari frame */
    height: 100%; /* Tinggi gambar 100% dari frame */
    object-fit: cover; /* Memastikan gambar terpotong dengan baik */
    transform: scale(1.1); /* Memperbesar gambar 10% */
    transition: transform 0.3s ease; /* Transisi halus saat hover */
}

.profile-photo:hover img {
    transform: scale(1.3); /* Memperbesar gambar lebih saat hover */
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: #eee;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.button {
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.facebook {
    background: #3b5998; /* Facebook color */
}

.github {
    background: #333; /* GitHub color */
}

.linkedin {
    background: #0077B5; /* LinkedIn color */
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

footer {
    margin-top: 1rem; /* Jarak atas footer dari konten sebelumnya */
}