/*
 * For blog-style posts
 */
 .blog-container {
    width: 100%;

    /* disable overflow */
    overflow: hidden;

    /* use flex so we can center blog-content */
    display: flex;
    justify-content: center;
}

.blog-background {
/* Code adapted from Panwar, 2015. */
    position: fixed;

    /* location of the background image */
    background-image: url("../img/bg2.jpg");

    /* applying the actual blur filter */
    filter: blur(4px);

    /* fill full page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    /* center the image to the center of the display */
    background-position: center;

    /* avoid tiling */
    background-repeat: no-repeat;

    /* zoom the background in to cover the display */
    background-size: cover;

    /* Get the z-ordering right. Content goes over background */
    z-index: -1;
/* End of adapted code */

/* Code adapted from W3Schools, n.d. */
    /* make sure the background is fixed position. */
    background-attachment: fixed;
/* End of adapted code */
}

.blog-box {
    /* Fill 100vh of the width of the div */
    width: 100vh;

    /* Set a top margin */
    margin-top: 30px;

    /* Set background color to white */
    background-color: white;

/* Code adapted from W3Schools, n.d. */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* End of adapted code */
}

.blog-title {
    /* set top margin to space out from the previous element */
    margin-top: 10px;

    /* center the text */
    text-align: center;

    /* font styling */
    font-weight: 500;
    font-size: 30px;

    /* Compensate for the alignment quirk
       in blog-read-time h2. */
    margin-bottom: -5px;
}

.blog-content {
/* Code adapted from Crozier, 2015. */
    list-style-position: inside;
    display: block;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
/* End of adapted code */
}

.blog-read-time {
    /* use flex */
    display: flex;

    /* align items to center */
    align-items: center;
    justify-content: center;
}

.blog-read-time h2 {
    /* the top and bottom margins have to match
       to align with the fa icon. */
    margin-top: 5px;
    margin-bottom: 5px;

    /* font styling */
    font-weight: 100;
    font-size: 15px;
}

.blog-navigation {
    background-color:antiquewhite;
    margin-left: 20px;
    margin-right: 20px;
}

.blog-image {
/* Code adapted from W3Schools, n.d. */
    display: block;
    margin-left: auto;
    margin-right: auto;
/* End of adapted code */

/* Code adapted from Matthew, 2023. */
    object-fit: contain;
/* End of adapted code */
}

.blog-navigation h1,
.blog-navigation li {
    margin-left: 10px;
}

.blog-iframe {
    border: 0;
}

/* On devices with small resolution, space is limited and should be
   used as efficiently as possible, so make blog-box take up 100% width
   and remove top margin on mobile devices and hide blog-background */
/* Breakpoints are based off the work of Adhithi, 2024. */
/* Code adapted from W3Schools, n.d. */
@media only screen and (max-width: 900px) {
    .blog-box {
        margin-top: 0px;
        width: 100%;
        box-shadow: none;
    }

    .blog-background {
        display: none;
    }
}
/* End of adapted code */