html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
#navbar-section {
    position: relative; 
    height: 250px; 
    background: #1a1a2e; 
    margin-bottom: 50px;
}
#navbar-image {
    width: 100%; 
    height: 100%; 
    object-fit:cover;
}
#image-profile-container {
    position: absolute; 
    bottom: -35%; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 10;
}
#image-profile {
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    border: 4px solid white; 
    object-fit: cover;
}
.reveal {
    transform: translateY(25px);
    animation: text-reveal 2.5s ease forwards;
}
.text-reveal {
    transform: translateY(25px);
    animation: text-reveal 1.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
}
@keyframes text-reveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.text-reveal-slow {
    transform: translateY(50px);
    animation: text-reveal-show 1.5s ease forwards;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
}
@keyframes text-reveal-show {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}