/*
Description: This is the styling for my self-introduction website.
Version: 1.0.1
Author: Marvin Schank
Author URI: https://marvinschank.de/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------
 * These are style decisions for the blog page.
 * -------------------------------------------
 */
.blogpostsFrame {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
}

.blogpostsContainer {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
}

.blogpostsContainer a {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 608px;
}

.blogpostCard {
    display: flex;
    background-color: rgb(64 64 64);
    border-radius: 0.75rem;
    flex-direction: row;
    max-height: 20rem;
    max-width: 42rem;
    width: 100%;
    height: 100%;
}

.blogpostCardImage {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    max-width: 40%;
    overflow: hidden;
}

.blogpostCardText {
    display: flex;
    padding: 1.5rem;
    justify-content: space-between;
    flex-direction: column;
    max-width: 60%;
}

.blogpostCardTextTags {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    overflow-x: scroll;
    max-width: 100%;
}

.blogpostCardTextTag {
    border: var(--link-hover-color);
    border-width: 1px;
    border-style: solid;
    border-radius: 50px;
    padding: 2px 15px;
    background-color: white;
    color: var(--link-hover-color);
    text-wrap: nowrap;
}

.blogpostCardTextDateContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.blogpostCardTextTitleAndAbstract {
    height: 66%;
}

.blogpostCardTextAbstract {
    height: 66%;
    overflow: scroll;
}

.blogpostCardTextDate {
    font-size: 0.75rem;
    padding: 0.75rem;
}

.blogpostCardTextTitle {
    color: rgb(226 232 240);
    font-size: 1.5rem;
    font-weight: 700;
}

.singlePostFrame {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    display: flex;
}

.singlePostHeadlineTitle {
    color: rgb(226 232 240);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.5rem;
}

@media (prefers-color-scheme: light) {
	.singlePostHeadlineTitle {
		color: black !important;
	}
}

.singlePostSubtitle {
    color: rgb(148 163 184);
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
}

.singlePostDate {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(148 163 184);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.singlePostImageContainer {
    aspect-ratio: var(--thumbnail-aspect-ratio);
}

.singlePostImage {
    object-position: center;
}

.singlePostContent {
    font-size: 1.125rem;
    line-height: 1.75rem;
    overflow-wrap: break-word;
}

.singlePostContent h1 { color: rgb(237 112 107); line-height: 5rem;}
.singlePostContent h2 { color: rgb(243 177 114); line-height: 4rem;}
.singlePostContent h3 { color: rgb(248 211 88); line-height: 3rem;}
.singlePostContent h4 { color: rgb(154 215 121); line-height: 2rem;}
.singlePostContent h5 { color: rgb(131 195 237);}
.singlePostContent h6 { color: rgb(166 149 195);}