html {
  scroll-behavior: smooth;
}



/* shared class css */
.active{
    color : var(--color-primary-content);
    background-color: var(--color-primary);
    border-radius: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

header nav ul li a {
    transition: 
        background-color 0.5s ease,
        color 0.5s ease,
        border-radius 0.5s ease,
        padding 0.5s ease;
}