/* animations */ 
.hidden{
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s
}
.show{
    opacity: 1;
    transform: translateX(0);
}

.hiddentwo{
    opacity: 0;
    filter: blur(2px);
    transition: all 2s
}
.showtwo{
    opacity: 1;
    filter:blur(0);
}

html{
    scroll-behavior: smooth;
}


/* This is the style for the ScrollBar... you could also put this in CSS...*/
::-webkit-scrollbar { width: 5px; } 
::-webkit-scrollbar-track{ background: rgba(138, 138, 138, 0.705); border-radius: 100vw; } 
::-webkit-scrollbar-thumb{ background: rgb(255, 255, 255); border-radius: 100vw; } 
::-webkit-scrollbar-thumb:hover{ background: rgb(199, 199, 199); }

/* don't need to have this just for users that have reduced motion set up */
@media(prefers-reduced-motion){
    .hidden{transition:none;}
}