html {
    scroll-behavior: smooth;
}

:root {
    --text-greyy: #999999;
    --text-whitee: #f0eeee;
    --backgroundd: #080808;
    --fontsss: "Schibsted Grotesk", sans-serif;
    --font-weight: 400;
    --font-style: normal;
}

/* body */
body {
    background-color: var(--backgroundd) !important;
    font-family: var(--fontsss) !important;
}

/* header */
header .header-content h1.name-title {
    color: var(--text-whitee);
    font-weight: bold;
}

header .header-content .subtitle {
    color: var(--text-greyy);
    line-height: 1,5rem;
}

header .contact-info .about-title {
    color: var(--text-whitee);
    font-weight: bold;
    text-decoration: none;
    font-size: 2rem;
}

header .contact-info .about-title:hover {
    color: var(--text-greyy);
    text-decoration: none;
    transition: all 0.3s ease-in;
}

/* main */
main {
    margin-top: 180px;
}

/* main aside */
main aside .profile-summary {
    color: var(--text-whitee);
    font-size: 1rem;
}
/* button link */
main aside .button-link {
    border-color: transparent;
    background-color: transparent;
    color: var(--text-whitee);
    padding: 0.8rem;
    border-top: #565656 1px solid;
}

main aside .button-link:hover {
    background-color: var(--text-whitee);
    color: var(--backgroundd);
}

main aside .button-link:hover a {
    color: var(--backgroundd);
}

main aside .button-link a {
    text-decoration: none;
    color: var(--text-whitee);
}

/* experience */
.experience-title {
    color: var(--text-whitee);
    font-weight: bold;
    font-size: 1rem;
    margin-top: 0.2rem;
}
/* Main article */
article {
    margin-top: 1.2rem;
}

/* article experience */
article .article-title {
    color: var(--text-whitee);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.8rem;
}

article .article-company {
    color: var(--text-greyy);
}

article .article-date {
    color: var(--text-greyy);
}

article .article-location {
    color: var(--text-greyy);
}

article .article-list-group {
    list-style: disc;
    color: var(--text-whitee);
}

/* article skills */
.article-skills {
    padding-top: 0.8rem;
    padding-bottom: 2rem;
}

article .skill-set-list {
    margin-top: 1.5rem;
}

article .skill-title {
    color: var(--text-whitee);
    padding-bottom: 2rem;
    font-weight: bold;
    font-size: 1rem;
}

article .skill-set-list .skill-title-list {
    color: var(--text-greyy);
    padding-bottom: 1rem;
}

article .skill-set-list .skill-list {
    list-style: disc;
    color: var(--text-whitee);
}

.article-education {
    padding-top: 0.8rem;
    padding-bottom: 3rem;
}

.article-education .education-list {
    margin-top: 2rem;
}

.article-education .education-title {
    color: var(--text-whitee);
    font-weight: bold;
    padding-bottom: 2rem;
    font-size: 1rem;
}

.article-education .education-campus {
    color: var(--text-whitee);
}

.article-education .education-degree {
    color: var(--text-whitee);
    line-height: 0.6rem;
}

.article-education .education-date {
    color: var(--text-greyy);
}

.article-certification {
    padding-top: 0.8rem;
    padding-bottom: 3rem;
}

.article-certification .certification-title {
    color: var(--text-whitee);
    font-weight: bold;
    padding-bottom: 2rem;
    font-size: 1rem;
}

.article-certification .certification-list {
    list-style: disc;
    color: var(--text-whitee);
}

/* footer */
.contact-me {
    margin-top: 80px;
    padding: 1.8rem;
}

.contact-button-modal {
    color: var(--text-whitee);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.6rem;
    cursor: pointer;
}

.contact-button-modal:hover {
    color: var(--text-greyy);
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.modal .dialogue {
    background-color: #080808;
    border: var(--text-greyy) 0.1px solid;
    border-radius: 8px;
    color: var(--text-whitee);
    text-align: start;
}

.modal .dialogue .modal-body .button-send {
    background-color: transparent;
    border: var(--text-greyy) 0.1px solid;
    color: var(--text-whitee);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
}

.modal .dialogue .modal-body .button-send:hover {
    background-color: var(--text-whitee);
    color: var(--backgroundd);
    transition: all 0.3s ease-in;
}



/* About is here*/
.about-me-title {
    color: var(--text-whitee);
    font-weight: bold;
    font-size: 1.2rem;
}

.about-me .about-me-desc {
    color: var(--text-whitee);
    line-height: 2.4rem;
    font-size: 1rem;
}

.about-me {
    padding-bottom: 2rem;
    margin-bottom: 35px;
}


/* sticky side menu */
@media (min-width: 800px) {
    main .side-menu {
    position: sticky;
    top: 20px;
    height: fit-content;
    align-self: flex-start;
    z-index: 10;
    transition: top 0.3s ease;
    }

    main .side-menu aside {
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    main .side-menu aside::-webkit-scrollbar {
        width: 4px;
    }
}


/* Untuk mobile (di bawah 800px), nonaktifkan sticky */
@media (max-width: 799px) {
    main .side-menu {
        position: static;
    }
    main {
        padding: 0.5rem;
    }

    main aside .button-link {
        font-size: 0.9rem;
        padding: 0.5rem;    
    }

    header .header-content h1.name-title {
        font-size: 1.2rem;
    }
    header .header-content .subtitle {
        font-size: 1rem;
        line-height: 1.2rem;
    }
    header .contact-info .about-title {
        font-size: 1.2rem;
    }

    .article-experience .experience-set {
        margin-bottom: 2rem;
    }
    .article-experience .experience-set .article-title {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }

    .article-experience .experience-set .article-company {
        font-size: 1rem;
    }

    article ul li {
        font-size: 1rem;
    }

    article .skill-list li {
        font-size: 1rem;
    }

    .article-education .education-campus {
        font-size: 0.9rem;
    }

    .article-education .education-degree {
        font-size: 0.9rem;
        line-height: 1rem;
    }
    
    /* footer */
    .contact-me {
        padding: 0.5rem;
        margin-top: 80px;
        font-size: 1rem;
    }

    /* About Here */
    .about-me .about-me-desc {
        font-size: 1rem;
        line-height: 2rem;
    }
}

/* Optional: Adjust spacing untuk tablet */
@media (min-width: 768px) and (max-width: 1279px) {
    main .side-menu {
        top: 15px; /* Sedikit lebih rendah untuk tablet */
    }
    .article-education .education-degree {
    line-height: 1.2rem;
    }

    .experience-set {
        padding: 1rem 1.2rem 0 0;
        margin-bottom: 1.5rem;
    }

}