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

:root {
    --judul: 'Poppins', sans-serif;
    --isi: 'Dataytpe', monospace;
    --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.315);
}

body {
    margin: 0;
    overflow-x: hidden;
    min-height: auto;
    /* Campuran warna arang dan biru malam */
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    background-attachment: fixed;
    color: #cbd5e1; /* Warna teks abu-abu terang agar kontrasnya pas */
    scrollbar-width: none;
}

.wrapper {
    max-width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;

}

header {
    margin: 10px auto 70px auto;
    padding: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    position: relative;
}

header h1 {
    font-family: var(--judul);
    font-size: 2.2rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.315);
}

header p {
    font-family: var(--isi);
    font-weight: 200;
    font-size: 0.9rem;
    margin-top: 0;
    padding: 3px 30px;
    position: absolute;
    top: 85px;
    color: #FFFFFF;
    background: linear-gradient(-135deg, #213970 0%, #020617 100%);
    border-radius: 25px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.205);
}

.skill-list {
    display: flex;
    font-size: 0.6rem;
    gap: 12px;
    justify-content: center;
    position: absolute;
    bottom: -40px;

}

#list-satu {
    list-style: none;
}

.content {
    background-color: rgba(255, 255, 255, 0.308);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid white;
    width: 90%;
    margin: 0 auto 0 auto;
    padding: 24px;
    text-align: left;
    line-height: 1.6;
    color: rgb(255, 255, 255);
    text-shadow: var(--text-shadow);
    font-family: var(--isi);
    font-size: 0.8rem;
    position: relative;
}

.content::before {
    position: absolute;
    content: '😄';
    font-size: 3rem;
    bottom: -36px;
    transform: rotate(26deg);
    right: -12px;
}

.identitas {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--isi);
    gap: 6px;
}

.identitas p {
    margin: 0;
    font-size: 0.8rem;
}

#profil {
    width: 120px;
    border-radius: 50%;
    border: 2px solid white;
    margin: 60px auto 12px;
}

.skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
}

.skills h1 {
    font-family: var(--judul);
    font-weight: 500;
    padding: 12px;
    width: 30%;
    text-align: center;
    border-bottom: 1px solid white;
    transition: 0.2s ease-out;
}

.skills h1:hover{
    width: 70%;
}

.skill-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    align-items: center;
    font-family: var(--isi);
    
}

.skill-card p {
    text-align: left;
    padding: 25px;
    width: 90%;
    border-radius: 25px;
    border: 1px solid rgb(255, 255, 255);
    transition: 0.2s ease-out;
    text-align: center;
}

.skill-card p:hover {
    border-color: gold;
    color: gold;
    background-color: rgba(255, 255, 255, 0.199);
}

.proyek {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    width: 100%;
}

.proyek h1 {
    font-family: var(--judul);
    font-weight: 500;
    padding: 12px;
    width: 40%;
    text-align: center;
    border-bottom: 1px solid white;
    transition: 0.2s ease-out;
}

.proyek h1:hover{
    width: 70%;
}

.proyek-card {
    display: flex;
    margin-top: 60px;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.card {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding-bottom: 24px;
    border: 1px solid white;
    border-radius: 25px;
    transition: transform 0.2s ease-out;
}

.card img {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 25px 25px 0 0;
}

.card h3 {
    font-family: var(--judul);
    padding: 12px 0 4px 12px;
    font-size: 1rem;
}

.card p {
    font-family: var(--isi);
    font-size: 0.8rem;
    padding: 0 0 0 12px;

}

.card:hover{
    border-color: rgb(255, 255, 255);
    transform: translate(0, -4px);
    box-shadow: 0 0 15px gold;
    box-shadow: 0 0 30px rgba(255, 217, 0, 0.836);
    box-shadow: 0 0 60px rgba(255, 217, 0, 0.411);
    color: crimson;
}

#kontak {
    font-family: var(--judul);
    font-weight: 500;
    padding: 12px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.164);
    transition: 0.2s ease-out;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.164);
    background: linear-gradient(-135deg, #213970 0%, #020617 100%);;
}

footer{
    padding: 12px 0 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--isi);
    font-weight: 200;
    font-size: 0.7rem;
}

#copyright {
    font-family: var(--isi);
    font-size: 0.6rem;
    text-align: center;
    padding: 12px;
    color: rgba(255, 255, 255, 0.267);
}

@media (min-width: 1024px){

    header h1{
        font-size: 4rem;
    }

    header p {
        top: 120px;
    }

    .skill-card {
        flex-direction: row;
        max-width: 1100px;
    }

    .proyek-card {
        flex-direction: row;
        max-width: 90%;
    }

    #email::before{
        content: '| ';
    }

    #telp::before{
        content: '| ';
    }
}

@media (min-width: 768px){

    #email::before{
        content: '| ';
    }

    #telp::before{
        content: '| ';
    }    

}