body {
    background-color: #F5F5F5;
}

.headline {
    font-size: 2.5rem;
    font-weight: 700;
}

#load-blog{
    height: 120vh;
    width: 100%;
}
#load-blog.hide{
    height:0px;
    transition: .5s ease-in;
    animation: none !important;
}
.skeleton {
    border-radius: 4px;
    background-color: lightgray;
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }

    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

.author {
    color: #008D91;
}

.sideBarCard {
    background-color: white;
    padding: 20px;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
}

.donateCard {
    background-color: #EBF8F4;
    padding: 20px;
    border: 1px solid #00A671;
    border-radius: 4px;
}

    .donateCard > h3 {
        color: #00A671;
    }

article {
    background-color: white;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
}

#primary #main {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5%;
    margin: 50px auto;
    justify-content: space-between;
}

.post-bg {
    padding: 1.5rem;
}

.post {
    border-radius: 10px;
    border: 1px solid #E9E3E3;
    display: flex;
    flex-direction: column;
    flex: 0 1 23%;
    margin-bottom: 1.5rem;
}

.post:hover {
    filter: drop-shadow(2px 4px 6px #E9E3E3);
}

#post-image {
    height: 400px !important;
    background-repeat:no-repeat;
    background-size:cover;
}


.article-image {
    max-width: 600px;
    max-height: 200px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

    .article-image img {
        width: 100%;
    }

.entry-title, .entry-content, .article-link, .article-author {
    padding: 0.5rem 1.5rem;
}

.entry-title {
    font-size: 1.3rem;
    margin: 0px;
    flex-grow: 1;
    padding-top: 1rem;
}

.entry-content {
    display: none;
}

.article-author {
    color: #028BB6;
    font-weight: bold;
    padding-bottom: 1rem;
}

.blog-banner {
    height: 150px;
    background-image: url("/assets/img/blog-hero-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}
#sidebar{
    position:sticky;
    top:120px;
}

.wp-block-heading {
    margin: 2rem 0 1rem 0;
    font-weight: 700;
}



@media (max-width: 1024px) {
    .post {
        flex: 0 1 32%;
    }
}

@media (max-width: 991px) {
    .headline {
        font-size: 32px;
    }
    .post {
        flex: 0 1 49%;
    }
}

@media (max-width: 576px) {
    .post {
        flex: 0 1 100%;
    }
    article {
        background-color: white;
        border: none;
        border-radius: 0;
    }
    #post-image {
        height: 200px !important;

    }
    .headline {
        font-size: 28px;
    }
}