/* card overrides */
.blog .card-header {
    height: 7em;
    position: relative;
}

.blog .card-header:hover {
    filter: brightness(120%);
}

.blog .card-title {
    background-color: rgba(10, 10, 10, 0.6);
    position: absolute;
    left: 0;
    bottom: -1px;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
    margin: 0 0 0 0;
    border-radius: 0 0 0 0;
}

.blog-details .card-title {
    padding-left: 8em;
}

.blog .draft {
    width: 100%;
    text-align: center;
    font-size: 3em;
    color: rgba(255, 222, 33, 0.8);
}

.blog .admin-buttons {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

/* blog detail page with author picture */
.blog .author .background {
    position: absolute;
    background-color: rgba(200, 200, 200, 0.8);
    top: 3.5em;
    left: 0.7em;
    height: 6.5em;
    width: 6.5em;
}

.blog .author .profile-picture {
    padding-top: 0.14em;
    padding-left: 0.14em;
    height: 6.35em;
    width: 6.35em;
}

.blog .author .name {
    font-size: 0.75em;
    position: absolute;
    top: 9.8em;
    left: 10.7em;
}

.blog .author .date {
    position: absolute;
    top: 13.7em;
    left: 13.4em;
    font-size: .6em;
}

.blog-details .card-body {
    padding-top: 5rem;
}

/* markdown insite fslightbox pictures */
.md-img-left-30 {
    width: clamp(50px, 30vw, 300px);
}

.md-img-center-50 {
    width: clamp(200px, 50%, 400px);
}


/* mobile scaling support */
@media screen and (max-width: 640px) {
    .blog .card-header {
        font-size: 3.5vw;
    }

    .blog .card-body {
        font-size: 2.5vw;
    }

    .blog .author .name {
        font-size: 2.62vw;
    }

    .blog .author .date {

    }
}