*,
html {
    margin: 0;
    padding: 0;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* kode untuk bikin warna gradient */
    background: linear-gradient(135deg, #2a58ff 0%, #c7b3fb 50%, #ff0f47 100%)
}

.container-navbar {
    background-color: #fff;
    width: 100%;
    padding: 15px 0;
    /* buat kasih line */
    border-bottom: 3px solid black;
}

.ul-navbar {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

}

.li-navbar {
    list-style-type: none;
    padding: 10px;
    margin: 5px;
    color: black;
    font-size: 30px;
    position: relative;
    z-index: 1;

}

.li-navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a58ff 0%, #c7b3fb 50%, #ff0f47 100%);
    border-radius: 8px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.2s ease-in-out;
    transition-delay: 0.15s;

}

.li-navbar:hover::before {
    opacity: 1;

}

/* supaya text ikut berubah */
.li-navbar:hover .a-navbar {
    color: black;
}

.a-navbar {
    color: black;
    text-decoration: none;
    font-weight: 800;
}

.container-content {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;


    /* Efeknya: Navbar kedorong ke atas mentok, Footer kedorong ke bawah mentok */
    flex: 1;


}

.a-content {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    color: black;
    text-decoration: none;
    font-size: 20px;
    border-radius: 80px;
    background-color: white;
    width: 720px;
    height: 480px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.img-content {
    width: 480px;
    /* auto biar ngikutin dan sesuain biar proporsional */
    height: auto;
    border-radius: 12px;

}

.img-about {
    width: 360px;
    height: auto;
    border-radius: 12px;
    border: 3px solid black;
    justify-content: space-evenly;
    align-items: center;
}

.img-contact {
    width: 320px;
    height: auto;
    border-radius: 12px;
    border: 3px solid black;
    justify-content: space-evenly;
    align-items: center;

}

.img-bio {
    width: 220px;
    height: auto;
    border-radius: 12px;
    border: 3px solid black;
    justify-content: space-evenly;
    align-items: center;
}

.container-footer {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 10% buat text bagas kontol */
    height: 10vh;
    border-top: 3px solid black;
}

.h2-footer {
    font-size: 40px
}


/* untuk rapihin halaman biodata */
.bio-text {
    text-align: center;
    align-items: center;
    justify-content: flex;

}

.bio-text h2 {
    margin-bottom: 20px;
}

.bio-text p {
    font-size: 20px;
    line-height: 1.5;
}