html{
    scroll-behavior: smooth;
    scroll-padding-top: 18%;
}

body::-webkit-scrollbar{
    width: 10px;
}

body::-webkit-scrollbar-thumb{
    background-color: var(--purple-90);
    border-radius: 100px;
}


.custom-nav li a::after{
    content: "";
    display: block;
    position: relative;
    top: 3px;
    width: 0%;
    height: 4px;
    background-color: var(--purple-90);
    transition: width 500ms ease-in-out;
}

.custom-nav li a:hover::after{
    width: 100%;
}
.navbar-nav #link-custom{
    font-size: 22px;
    line-height: 27px;
    color: var(--white-97);
}

.hero{
    margin-top: 80px;
}

.hero-name{
    font-size: 34px;
    line-height: 40px;
    color: var(--white-95);
    margin-bottom: 24px;
    white-space: nowrap;
}

.name-highlight{
    margin-left: 7px;
    color: var(--purple-90);
    border-right: 5px solid #ebf1f1;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(20) infinite alternate, caret 0.5s steps(2) infinite;
}

@keyframes caret {
    from{
        border-color: transparent;
    }
    to{
        border-color: #ebf1f1;
    }
}

@keyframes typing {
    from{
        width: 0;
    }
    
    to{
        width: 100%;
    }
}

.hero-job{
    font-size: 48px;
    line-height: 58px;
    color: var(--white-97);
    margin-bottom: 16px;
}

.text-discolor{
    text-shadow:
     0 0 5px var(--purple-90), 
     0 0 15px var(--purple-90), 
     0 0 20px var(--purple-90), 
     0 0 40px var(--purple-90), 
     /* 0 0 50px var(--purple-90),  */
     0 0 10px var(--purple-90);

    color: var(--purple-95);

    animation: blink 5s infinite;
}

@keyframes blink {
    20%,24%,55% {
      color: #111;
      text-shadow: none;
    }
  
    0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow:
     0 0 5px var(--purple-90), 
     0 0 15px var(--purple-90), 
     0 0 20px var(--purple-90), 
     0 0 40px var(--purple-90), 
     /* 0 0 50px var(--purple-90),  */
     0 0 10px var(--purple-90);
    color: var(--purple-95);
    }
}

.hero-introduce{
    margin-bottom: 48px;
}

.hero-img-avatar{
    position: relative;
    width: fit-content;
    background-color: #d0c6ff25;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    transition: all 1s;
}

.hero-img-avatar::before{
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    top: -20px;
    left: -20px;
    border-top: 10px solid var(--purple-90);
    border-left: 10px solid var(--purple-90);
}

.hero-img-avatar::after{
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: -20px;
    right: -20px;
    border-bottom: 10px solid var(--purple-90);
    border-right: 10px solid var(--purple-90);
}

.know-me__title{
    margin-top: 120px;
    margin-bottom: 80px;
}

.know-me__img{
    padding: 0px 8px; 
    border: 4px solid var(--purple-90); 
    border-radius: 20px; 
    background-color: #0A0119;
}

.know-introduce{
    margin-bottom: 30px;
    font-weight: 300;
}



.project__title{
    margin-top: 120px;
    margin-bottom: 80px;
}

.card .card-img-top{
    border-radius: 30px;
}

.card .img-card{
    position: relative;
}

.card .img-card::after{
    content: "";

    display: block;
    position: absolute;
    top: 0;

    width: 100%;
    height: 100%;
    
    border-radius: 30px;
    background-color: var(--absolute-primary);
    opacity: 0%;

    transition: opacity 500ms ease-in-out;
}

.card .img-card:hover::after{
    opacity: 60%;
}

.card .img-card button{
    opacity: 0%;
    transition: all 500ms ease-in-out;
}


.card .img-card:hover button{
    opacity: 100%;
}

.card .img-card .btn-view:hover{
    background-color: var(--white-97);
    color: var(--absolute-primary);
}

.card .card-body{
    margin-top: 24px;
    padding: 0px;
}

.card-body .card-title{
    color: var(--white-95);
    font-size: 24px;
    line-height: 30px;
}

.card-body .tag{
    margin-top: 13px;
    gap: 16px;
}

.tag .tag-items{
    padding: 8px 16px;
    border: 2px solid var(--white-90);
    border-radius: 8px;
    font-size: 18px;
    line-height: 22px;
    color: var(--white-95);
}

.contact{
    margin-top: 120px;
    margin-bottom: 225px;
}

.contact .d-flex{
    gap: 32px;
}

.contact-header{
    font-size: 1.125rem;
    font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
    line-height: 28px;
    color: var(--white-95)
}
.contact-title{
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
    line-height: 28px;
    color: var(--white-95)
}
.contact-email{
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 0.8999999999999999rem + 1.7500000000000002vw, 3rem);
    line-height: 28px;
    color: var(--white-95)
}

.socials .icon-socials::before{
    box-sizing: content-box;
    padding: 10px;
    border: 2px var(--white-95) solid;
    border-radius: 100%;
    color: var(--white-95);
    transition: all 0.2s ease-in-out;
}

.socials .icon-socials:hover::before{
    background-color: var(--white-95);
    color: var(--absolute-primary); 
}

.copyright{
    margin-top: 80px;
    margin-bottom: 140px;
    gap: 8px;
}

.copyright-logo{
    color: var(--white-95);
}
.copyright-name{
    font-size: 18px;
    line-height: 22px;
    color: var(--white-97);
}