@import '../../styles/index.css';
@import '../../components/Footer/Footer.css';
@import '../../components/Navigation/Navigation.css';
@import '../../components/PageTitle/PageTitle.css';

html{
    scroll-behavior: smooth;
}



/* .animation--popup{
    animation: popup 0.7s ease;
}

@keyframes popup{
    from{
        opacity: 0;
        transform: translateY(30px) rotateX(30deg);
    }
    to{
        opacity: 1;
        transform: translateY(0px) rotateX(0deg);
    }

} */
/*=== article  sidebar Styles=== */

.articles__sidebar{
    display: none;
    position: sticky;
    top: var(--nav-height);
    padding-top: var(--spce-xlg);
    height: fit-content;
    max-width: 150px;
    width: 100%;
}


.article__links{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: var(--spce-sm);
    align-items: stretch;
    font-size: var(--text-size-lg);
    gap: var(--spce-sm);
}

.article__links li{
    display: flex;
    flex-direction: column;
}

.article__links a{
    color:var(--text-color-secondary);
    background-color: transparent;
    /* color: red; */
    padding: 1px 3px;
    transition: background-color 0.2s ease;
}

.active.active{
    background-color: var(--color-highlight);
    border-radius: 3px;
    color: var(--text-color-main);
    color: var(--text-color-main);
}

/* main article section */

.articles__container{
    background-color: var(--color-background-dark);
    display: flex;
    justify-content: center;
    position: relative;
    border-top: var(--border-base) solid var(--color-secondary);
    border-bottom: var(--border-base) solid var(--color-secondary);
    min-height: 100vh;
}

.articles__title{
    font-size: var(--text-size-lg);
    color: var(--text-color-main);
    margin-bottom: var(--spce-sm);
}

.articles{
    background-color: var(--color-background-dark);
    color: var(--text-color-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spce-xlg);
    gap: var(--spce-xlg);
}

.article{
    display: flex;
    flex-direction: column;
    gap: var(--spce-sm);
    font-size: var(--text-size-lg);
    max-width: 700px;
}

.article__title{
    font-size: 2rem;
    scroll-margin-top: calc(var(--nav-height));

}


.article__content {
    display: flex; 
    flex-direction: column;
    line-height: 1.5;
    color: var(--text-color-secondary);
}


.article__content p {
    margin: var(--spce-sm) 0px;
}



@media (min-width: 768px){
    .articles__sidebar{
        display: block;
    }
}