body{

    margin: 0px; 
    background-color: #fff; 
    font-family: sans-serif;
    
}

h2 {
    font-size: 30px;
    color: #3f5689;
}



#blog_page___title{

    margin: auto; 
    width: 80%; 
    margin-top: 50px;

}

#blog_page___blog_posts_container{

    margin: auto; 
    width: 80%; 
    display: flex; 
    flex-wrap: wrap; 
    margin-top: 40px; 
    margin-bottom: 150px;

}

#blog_page___no_posts{

    width: 100%;
    font-size: 25px;
    margin-top: 110px;
    margin-bottom: 270px;
    text-align: center;
    color: #606179;

}


.blog_page_element{

    width: calc(33.33% - 40px);
    -webkit-box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%);
    -moz-box-shadow: 0px 9px 15px 0px rgba(38, 38, 38, 0.15);
    box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%);
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    transition: 0.3s;
    position: relative;

}

.blog_page_element:hover{

    transform: translateY(-3px);

    -webkit-box-shadow: 0px 12px 15px 0px rgb(38 38 38 / 15%);
    -moz-box-shadow: 0px 12px 15px 0px rgba(38, 38, 38, 0.15);
    box-shadow: 0px 12px 15px 0px rgb(38 38 38 / 15%);

}

.blog_page___blog_post_wallpaper{

    width: 100%; 
    height: 200px; 
    margin: auto; 
    border-radius: 10px 10px 3px 3px;

}

.blog_page___blog_post_title{

    font-size: 24px; 
    margin: 20px 0px 10px 0px; 
    color: #3f5689; 
    word-wrap: break-word; 
    overflow: hidden;

}

.blog_page___blog_post_divider{

    width: 40%; 
    height: 3px; 
    background-color: #ff644f; 
    margin: auto; 
    margin-bottom: 25px;

}

.blog_page___blog_post_content{

    margin: 0px 10px; 
    text-align: left; 
    font-size: 14px; 
    height: auto; 
    overflow: hidden; 
    margin-bottom: 30px; 
    color: #38444c; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    display: -webkit-box;

}

.blog_page___blog_post_date{

    font-size: 12px; 
    color: #606179; 
    right: 10px; 
    text-align: right; 
    position: absolute; 
    bottom: 15px;

}

h1{

    font-size: 50px; 
    margin: 20px 0px 10px 0px; 
    color: #3f5689; 
    font-weight: 800;

}



#blog_post_page___main_container{

    width: 80%; 
    margin: auto; 
    margin-bottom: 200px;

}

#blog_post_page___wallpaper{

    width: 100%; 
    height: 500px; 
    margin: auto; 
    border-radius: 10px;

}

#blog_post_page___publish_date{

    font-size: 14px; 
    color: #606179; 
    margin-bottom: 80px; 
    margin-right: 10px; 
    text-align: left;

}


#blog_post_page___content{

    margin: 0px 10px; 
    text-align: left; 
    font-size: 18px; 
    color: #38444c;

}

#blog_post_page___content h2{

    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 25px;

}

#blog_post_page___content h3{

    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #606179;

}

#blog_post_page___content .image-style-align-right {
    float: right;
    margin-left: 20px;
    width: 50%;
    max-width: 500px;
}

#blog_post_page___content .image-style-align-left {
    float: left;
    margin-right: 20px;
    width: 50%;
    max-width: 500px;
}



@media (pointer: coarse) or (max-width: 900px){

    #blog_page___title{

        margin-top: 80px;
    
    }

    #blog_page___title h2{

        font-size: 60px;
    
    }

    #blog_page___blog_posts_container{

        margin: auto; 
        width: 80%; 
        display: flex; 
        flex-wrap: wrap; 
        margin-top: 100px; 
        margin-bottom: 300px;
        min-height: 50vh;
    
    }
    
    #blog_page___no_posts{
    
        width: 100%;
        font-size: 55px;
        align-items: center;
        align-content: center;
        text-align: center;
        color: #606179;
        height: 50vh;
    
    }

    .blog_page_element{

        width: calc(100% - 40px);
        -webkit-box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%);
        -moz-box-shadow: 0px 9px 15px 0px rgba(38, 38, 38, 0.15);
        box-shadow: 0px 9px 15px 0px rgb(38 38 38 / 15%);
        border-radius: 40px;
        margin: 20px;
        padding: 20px;
        transition: 0.3s;
        position: relative;
        height: fit-content;

    }

    .blog_page___blog_post_wallpaper{

        border-radius: 20px 20px 8px 8px;
    
    }

    .blog_page___blog_post_title{

        font-size: 35px; 
        margin: 40px 0px 30px 0px; 
        color: #3f5689; 
        word-wrap: break-word; 
        overflow: hidden;
    
    }
    
    .blog_page___blog_post_divider{
    
        width: 40%; 
        height: 6px; 
        background-color: #ff644f; 
        margin: auto; 
        margin-bottom: 40px;
    
    }
    
    .blog_page___blog_post_content{
    
        margin: 0px 10px; 
        text-align: left; 
        font-size: 20px; 
        height: auto;
        overflow: hidden; 
        margin-bottom: 90px; 
        color: #38444c; 
        text-overflow: ellipsis; 
        -webkit-line-clamp: 4; 
        -webkit-box-orient: vertical; 
        display: -webkit-box;
    
    }
    
    .blog_page___blog_post_date{
    
        font-size: 20px; 
        color: #606179; 
        right: 20px; 
        text-align: right; 
        position: absolute; 
        bottom: 25px;
    
    }




    #blog_post_page___main_container{

        width: 100%; 
        margin: auto; 
        margin-bottom: 300px;
    
    }

    #blog_post_page___wallpaper{

        width: 100%; 
        height: 500px; 
        margin: auto; 
        border-radius: 0px;
    
    }
    
    #blog_post_page___publish_date{

        width: 80%;
        font-size: 18px;
        margin: auto;
        margin-bottom: 120px;

    }

    h1{

        width: 80%;
        margin: auto;
        font-size: 80px; 
        margin-top: 40px;
        margin-bottom: 20px;
        color: #3f5689; 
        font-weight: 800;

    }

    #blog_post_page___content{

        width: 80%;
        margin: auto;

    }

    #blog_post_page___content .image-style-align-right {
        float: left;
        width: 100%;
        max-width: initial;
        margin: 30px 0px;
    }
    
    #blog_post_page___content .image-style-align-left {
        width: 100%;
        max-width: initial;
        margin: 30px 0px;
    }

}