html {
    background-color: black;
}

body {
    margin: 0px;
}

#page-wrapper {
    background-position: 50% 0;
    margin: 0px;
    /* height: 100vh; */
                                                    background-image: var(--bg-image);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width:100%; 
    overflow: auto;
}

#content-Wrapper-block {
    display: flex;
    justify-content: left;
                                    /* width: 80%; */
                                        /* margin-inline: max(10px, 10vw); */
                                        /* margin-inline: clamp(10px, 2vw, 10%); */
                                        /* margin-inline: clamp(10px, 2vw, 10%); */
                                        margin-inline: clamp(10px, calc(5vw + 10px), 10vw);
    /* margin: auto; */

    flex: 1;
}

#content-Wrapper-block-spine {
    background-color: var(--content-color-2);
    border-radius: 5px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
    min-width: 10px;
}

#content-Wrapper-block-gap {
    min-width: 10px;
}

#content-wrapper {
    width: 100%;
                                font-family: 'Libre Baskerville', 'Baskerville', Georgia, serif;
                                background: var(--content-background);
                                /* background-image: url("../Images/texture1.png"); */
                                /* background-color: rgba(22, 21, 18, 0.81); */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--content-color-1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
    transform: translateZ(2px);
}

article {
    /* padding: 30px; */
    margin: 10px 4%;
}

.section-label {
    /* display: table; */
    border-spacing: 20px 5px;
    
}

.section-label h2{
    /*  */
}

.section-label-line {
    /* display: table-cell; */
    background: var(--section-gradient);
    /* width: 100%; */
    margin-inline: 30px;
    border-radius: 20px;
    padding: 2px 0px;

    /* display: table-cell; */
    white-space: nowrap;
    color: var(--section-title-color);
    padding-top: var(--section-title-padding);
    font-size: 25px;

    text-align: center;
    font-family: var(--theme-font-1);
}

#recent-articles {
    margin: 2em auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#project-news {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.related-articles {
    display: flex;
    flex-direction: column;
    margin: 5px;

    /* width: 80vw; */

}

.related-articles a {
    padding: 2px;
    text-decoration: none;
    color: var(--normal-text);
                                                    /* font-family: 'National-Park-Heavy', sans-serif; */
    font-family: var(--font-9);
    font-size: 15px;
                                                    text-overflow: ellipsis;
                                                    display: inline-block;
                                                    white-space: nowrap;
                                                    overflow: hidden;

                                                    padding: 5px 15px;
                                                    min-width: 0;


}

.related-articles a::before {
    /* content: " - "; */
}

.related-articles a:hover {
    /* text-decoration: underline; */
}

.related-articles a:hover {
    background-color: var(--navbar-color-2);
    border-radius: 20px;



}






















#popular-categories {
    
}

#popular-categories:hover {
    cursor: pointer;
}

.popular-category {
    margin: 5px 0px 5px 0px;
    text-decoration: none;
    position: relative;
}

.popular-category img {
    width: 100%;
    max-height: 400px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: all 0.5s ease-out;
}

#popular-categories a:nth-child(even) .popular-category:hover img {
    clip-path: polygon(65% 0, 100% 0, 100% 100%, 55% 100%);
}

#popular-categories a:nth-child(odd) .popular-category:hover img {
    clip-path: polygon(0% 0%, 45% 0%, 35% 100%, 0% 100%);
}

#popular-categories a:nth-child(even) h3 {
    right: 0px;
}

#popular-categories a:nth-child(odd) h3 {
    left: 0px;
}

#popular-categories a:nth-child(even) .popular-category div {
    left: 0px;
}

#popular-categories a:nth-child(odd) .popular-category div {
    right: 0px;
}

.popular-category h3 {
    padding: 10px;
    margin: 0px;
    position: absolute;
    top: 0px;

                                        color: white;
                                        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
                                        /* -webkit-text-stroke-color: var(--normal-text-inverse); */
                                        /* -webkit-text-stroke-color: var(--normal-text-inverse); */
                                        /* -webkit-text-stroke-width: 0.5px; */

    font-size: 35px;
    max-width: 300px;
    overflow: hidden;

    font-family: var(--font-12);
}

.popular-category div {
    position: absolute;
    width: 50%;
    bottom: 0px;
    top: 0px;
    color: var(--normal-text);
    opacity: 0;
    transition-delay: 0s;
    transition: opacity 0s;
    
    height: 90%;
    overflow: hidden;
    font-family: var(--font-15);
}

.popular-category:hover div {
    opacity: 1;
    transition-delay: 1s;
    transition: opacity 1s;
}




@media screen and (max-width: 900px) {
    .popular-category {
        position: initial;
    }

    .popular-category:hover h3 {
        text-decoration: underline;
    }

    .popular-category img {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
        max-height:200px;
        width: 100%;
        object-fit: contain;
        transition: 0s;
    }

    .popular-category h3 {
        position: initial;
        text-align: center;
        max-width: initial;
    }

    .popular-category p {
        position: initial;
        display: none;
    }




    .popular-category div {
        display: none;
    }
}