html {
    scroll-behavior: smooth;
}

body{
    margin: 0px;
    margin-top: 50px; 
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}
p {
    margin: 0;
}





p {
    animation: fade linear both;
    animation-timeline: view();
    animation-range: 5% cover 20%;
    animation-duration: 1ms;
}

@keyframes fade {
    from {
        filter: grayscale(100%);
        opacity: 0;
    } to {
        filter: grayscale(0%);
        opacity: 1;
    }
}
@keyframes appear {
    from {
        filter: grayscale(100%);
        opacity: 0;
    } to {
        filter: grayscale(0%);
        opacity: 1;
    }
}