/* All */

body{
    margin:0;
    padding:0;
    box-sizing:border-box;
    overflow-x: hidden;
    background-color: #040D20;
}

canvas{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
}

html{
    scroll-behavior:smooth;
    font-size: 100%;
}

.fullVh{
    display: none;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100vw;
    top: 0rem;
    left: 0rem;
    box-sizing: border-box;
    padding: 13.1875rem 7.5rem 5rem 7.5rem;
    justify-content: space-between;
}

.overflow{
    overflow: hidden;
    padding: .625rem;
}

.trait{
    background-color: #FBFBFB;
    transition: all 1.5s ease-in-out;
}

h3{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-size: 6.25rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: rgba(251, 251, 251, 0.6);
}

.page_title {
    opacity: 0;
    margin: 0;
    transition: all 1.5s ease-in-out;
}

/* ======================*/
/* ScrollBar START - display none */

/* Works on Firefox */
* {
scrollbar-width: none;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 0rem;
}

/* ScrollBar End */
/* ===================== */
/* NavBar START */

#navBar{
    position: absolute;
    top: 3.125rem;
    left: 0;
    right: 0;
    z-index: 100;
    transition: all 1.5s ease-in-out;
}

#all_ul{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.125rem;
    overflow: hidden;
}

.ul_responsive{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    height: 3.125rem;
    overflow: hidden;
    padding-left: 1.875rem;
}

li{
    list-style: none;
}

.trait_nav_bar{
    height: 0rem;
    width: .0625rem;
    background-color: #D4D4D4;
    transition: all 1.5s ease-in-out;
}

.li_btn_nav_bar{
    transition: all 1.5s ease-in-out;
    transform: translateY(-130%);
    opacity: 0;
}

.li_btn_nav_bar_slow{
    transition: all 1.1s ease-in-out;
    transform: translateY(-130%);
    opacity: 0;
}

.btn_nav_bar{
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 1.25rem;
    color: #fbfbfb;
    text-decoration: none;
    cursor: pointer;
    padding-bottom: .25rem;
    background: linear-gradient(currentColor 0 0) bottom /var(--d, 0) .0625rem no-repeat;
    transition:0.5s;
}

/* NavBar End */
/* ========================
/* Home Start */

#home{
    justify-content: center;
}

.title_home{
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 6.25rem;
    text-align: center;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: rgba(251, 251, 251, 0.7);
    margin: 0;
    transition: all 1.5s ease-in-out;
    transform: translateY(130%);
    opacity: 0;
}

#trait_home{
    width: 0rem;
    height: .1875rem;
    background-color: #FBFBFB;
    transition: all 1.5s ease-in-out;
}

#title_home_2{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 3.125rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: rgba(251, 251, 251, 0.7);
    transition: all 1.5s ease-in-out;
    transform: translateY(-130%);
    opacity: 0;
}

/* Home End */
/* =======================
/* Presentation START */

#presentation{
    gap: 6.25rem;
    justify-content: unset;
}

#div_presentation{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#presentation_left{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#presentation_right{
    display: flex;
    align-items: center;
    height: 100%;
}

#trait_presentation_left{
    width: 0%;
    height: .125rem;
    transition: all 1.5s ease-in-out;
}

#trait_presentation_right{
    width: .125rem;
    height: 0%;
}

.p_presentation{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.375rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    transition: all 1.5s ease-in-out;
    transform: translateY(300%);
}

#img_presentation{
    width: 12.5rem;
    transform: translateX(150%);
    transition: all 1.5s ease-in-out;
}

/* Presentation END */
/* Achievement Start */

#achievement{
    height: unset;
}

#page_title_achievement{
    margin-bottom: 6rem;
}

#all_achievement{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9.375rem;
    align-items: center;
}

.div_achievement{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 3.125rem;
}

.overflow > .img_achievement{
    border-radius: .125rem;
    width: 100%;
    height: 100%;
    box-shadow: 0rem 0rem 1.25rem rgb(0 0 0 / 50%);
    cursor: pointer;
}

.text_achievement{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.div_achievement > .overflow{
    width: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement_left{
    transition: all 1.5s ease-in-out;
    transform: translateY(110%);
}

.achievement_right{
    transition: all 1.5s ease-in-out;
    transform: translateY(-120%);
}

h4{
    color: #FBFBFB;
    font-size: 2rem;
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    color: rgba(251, 251, 251, 0.876);
    margin: .9375rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
}

.p_achievement{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    text-align: center;
}

.link_achievement{
    color: rgb(251, 251, 251);
    text-decoration: none;
    background: linear-gradient(currentColor 0 0) bottom /var(--d, 0) .0625rem no-repeat;
    transition:0.5s;
}

.link{
    display: flex;
    color: #fbfbfb;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    transition: .5s;
    background: linear-gradient(currentColor 0 0) bottom /var(--d, 0) .0625rem no-repeat;
}

.icon_link{
    padding-top: .3125rem;
}

.div_logo_achievement{
    display: flex;
    gap: 1.5625rem;
}

.logo_achievement{
    width: 3.125rem;
    height: 3.125rem;
}

#arrow{
    display: flex;
    position: fixed;
    bottom: 3rem;
    right: 4rem;
    align-items: flex-end;
    gap: .3125rem;
    opacity: 0;
    transition: all .7s ease-in-out;
}

#arrow > img{
    width: 3.125rem;
}

.bounce{
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from {transform: translateY(0rem);} to {transform: translateY(1rem);}
}

#no_shadow{
    box-shadow: none;
}

/* Achievement End */
/*===================================*/
/* Skill Start */

#skill{
    justify-content: unset;
    gap: 6.25rem;
}

#all_skill{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#all_description{
    display: flex;
    flex-direction: column;
    gap: 1.5625rem;
    width: 40%;
    padding: .625rem;
}

.description{
    display: flex;
    align-items: center;
    gap: .1875rem;
    height: 4.375rem;
}

#description_2{
    height: 8rem;
}

.trait_description{
    width: .0625rem;
    background-color: #d4d4d4;
    transition: all .7s ease-in-out;
    height: 0;
}

#trait_description_2 {
    width: .125rem;
}

.p_skill{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    margin: 0;
    transform: translateX(-120%);
    transition: all 1.5s ease-in-out;
}

#Iam{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    margin: 0;
    transition: all 1.5s ease-in-out;
    transform : translateX(-120%);
}

.contents{
    display: contents;
}

.my_cv{
    text-decoration: none;
    display: unset;
    text-decoration: none;
}

.link_in_presentation{
    display: unset;
    text-decoration: none;
}

#all_skill_bar{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
}

.skill_bar{
    display: flex;
    gap: .9375rem;
}

.logo_skill{
    width: 4rem;
    height: 4rem;
    transform: translateY(120%);
    transition: all 1.5s ease-in-out;
}

/* Skill End
/* Contact Start */

#contact{
    justify-content: space-between;
    padding-bottom: 1rem;
}

#contact_flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

#contact_left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.p_contact{
    text-align: center;  
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    transform: translateY(700%);
    transition: all .7s ease-in-out;
}

#trait_contact_left{
    height: 1px;
    background-color: #FBFBFB;
    width: 0%;
    transition: all 1.5s ease-in-out;
}

#text_form_div{
    height: 12.5rem;
}

#social{
    display: flex;
    gap: 2.1875rem;
    padding: 1.25rem;
    box-sizing: border-box;
}

.logo_social{
    width: 3.75rem;
    height: 3.75rem;
    transition: all .7s ease-in-out;
}

#logo_social_1{
    transform: translateY(-200%);
}

#logo_social_2{
    transform: translateY(-200%);
}

#logo_social_3{
    transform: translateY(-200%);
}

#logo_social_4{
    transform: translateY(-200%);
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.form_flex{
    height: 3.125rem;
    display: flex;
    align-items: center;
}

.input{
    text-align: center;  
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.375rem;
    line-height: 1.8125rem;
    color: rgba(251, 251, 251, 0.7);
    height: 100%;

    background-color: unset;
    border: unset;
    width: 0rem;
    transition: all 1.5s ease-in-out;
    text-align: left;
    text-indent: .9rem;
}

#submit{
    justify-content: center;
    width: 12.5rem;
    transform: translateY(-200%);
    transition: all .7s ease-in-out;
    color: #fbfbfb;
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1.375rem;
    height: 100%;
    border: unset;
}

.error{
    color: #FF3C30;
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1rem;
}

#confirm{
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-size: 1rem;
    color: #1BBA02;
}

.trait_contact{
    height: 0%;
    width: .0625rem;
    background-color: #D4D4D4;
    transition: all .7s ease-in-out;
}

label{
    height: 100%;
}

#text_form{
    height: 100%;
}

/* Contact End */
/*===================================*/
/* All Hover */

/* Hover NavBar */

.btn_nav_bar:hover{
    --d: 100%;
}

/* Hover Achievement */

.link_achievement:hover{
    --d: 100%;
}

.link:hover{
    --d: 100%;
}

/* Hover Constact */

.logo_social_hover:hover{
    transform: scale(1.05);
    transition: all 0.3 ease-in-out;
}

/* Hover End */
/* Responsive Start */

@media screen and (max-width: 1800px){
    html{
        font-size: 95%;
    }
}

@media screen and (max-width: 1700px){
    html{
        font-size: 90%;
    }
}

@media screen and (max-width: 1600px){
    html{
        font-size: 85%;
    }
}

@media screen and (max-width: 1500px){
    html{
        font-size: 80%;
    }
}

@media screen and (max-width: 1400px){
    html{
        font-size: 75%;
    }
}

@media screen and (max-width: 1280px){
    html{
        font-size: 70%;
    }
}

@media screen and (max-width: 1024px){
    html{
        font-size: 60%;
    }
}

@media screen and (max-width: 768px){

    .fullVh{
        min-height: 100vh;
        height: unset;
        padding-top: 20rem;
    }

    /* NavBar Responsive - Start */
    #navBar{
        top: 4rem;
    }
    
    #all_ul{
        gap: 1.9rem;
        height: 4.5rem;
    }

    .ul_responsive{
        padding-left: 0;
    }
    
    .btn_nav_bar{
        font-size: 1.7rem;
    }

    /* NavBar Responsive - End */
    /* Presentation start */

    #div_presentation{
        flex-direction: column;
        gap: 6.25rem;
    }

    #presentation_left{
        width: 80%;
    }

    .p_presentation{
        font-size: 1.75rem;
        text-align: center;
    }

    /* Presentation stop */
    /* Acheivement start */

    .div_achievement{
        flex-direction: column;
    }

    .odd{
        flex-direction: column-reverse;
    }

    .div_achievement > .overflow {
        width: 80%;
    }

    .p_achievement{
        font-size: 1.75rem;
    }

    /* Achievement STOP */
    /* skill START */

    #all_skill{
        flex-direction: column;
        gap: 6.25rem;
    }

    #all_description{
        gap: 2.5rem;
        width: 80%;
    }

    #all_skill_bar{
        width: 80%;
    }

    #Iam{
        font-size: 1.75rem;
    }

    .p_skill{
        font-size: 1.75rem;
    }

    .my_cv{
        font-size: 1.75rem;
    }

    /* Skill Stop */
    /* contact START */

    #contact{
        gap: 6.25rem;
        justify-content: unset;
    }

    #contact_flex {
        justify-content: unset;
        flex-direction: column;
        gap: 6.25rem;
    }

    /* Contact STOP */
}

@media screen and (max-width: 480px){

    .fullVh{
        padding: 20rem 1rem 5rem 1rem;
    }

    #all_ul{
        flex-direction: column;
        height: 9rem;
    }

    .title_home{
        font-size: 3.125rem;
    }

    #title_home_2{
        font-size: 1.5625rem;
        text-align: center;
    }

    h3{
        font-size: 3.4375rem;
    }

    .div_achievement > .overflow {
        width: 100%;
    }

    #all_description{
        width: 100%;
    }

    #all_skill_bar{
        width: 100%;
    }
}

/* Responsive End */