@import url("../css/global.css");

@import url("../css/variables.css");

.TheCarVerdictHeader,
.latestposts,
.latestposts button,
.latest h2,
.filterTitle,
.BlogContent,
.blog-post,
.blog-post h2 {
    display: flex;
}

.TheCarVerdictHeader, 
.filterTitle,
.BlogContent,
.blog-post {
    flex-direction: column;
}

.TheCarVerdictHeader,
.latestposts,
.bigimg,
.latest h2,
.filterTitle {
    justify-content: center;
}

/* TheCarVerdictHeader */

.TheCarVerdictHeader {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url(../assets/img/road.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
}

.TheCarVerdictHeader,
.latest {
    height: 250px;
}

.TheCarVerdictHeader,
.latestposts,
.filterTitle,
.BlogContent {
    align-items: center;
}

.TheCarVerdictHeaderText,
.TheCarVerdictHeader,
.latestposts button,
.filterTitle select,
.blog-post,
.CreateBlogPostButton button {
    background-color: var(--headerfootercolor);
}

.latestposts button,
.latest h2,
.filterTitle,
.filterTitle select,
.CreateBlogPostButton button {
    color: var(--fontcolor);
}

.TheCarVerdictHeader,
.TheCarVerdictHeaderText,
.latest,
.latestposts button,
.filterTitle select,
.latest,
.filter,
.BlogContent,
.blog-post,
.CreateBlogPostButton button {
    border-style: inset;
    border-color: var(--bordercolor);
}

.TheCarVerdictHeader,
.latest,
.latest,
.filter,
.BlogContent {
    border-width: 1px;
}

.TheCarVerdictHeaderText,
.CreateBlogPostButton button {
    border-radius: 20px;
}

.TheCarVerdictHeaderText,
.latestposts button,
.filterTitle select,
.CreateBlogPostButton button {
    border-width: 2px;
}

.TheCarVerdictHeaderText {
    padding: 10px 20px;
    animation: fadeIn 1s ease-in-out forwards;
}

.TheCarVerdictHeaderText h1 {
    margin-top: 15px;
}

.TheCarVerdictHeader h4 {
    text-decoration: underline;
}

.latestposts {
    flex-direction: row;
}

.latestposts button,
.filterTitle select,
.blog-post {
    border-radius: 10px;
}

.latestposts button {
    margin-left: 5px;
    margin-right: 5px;
}

.navarrow {
    width: 50px;
    height: 50px;
}

.bigimg,
.PreviewImage {
    border-radius: 40px;
    width: 200px;
    object-fit: cover;
}

.bigimg {
    height: auto;
    padding: 10px;
}

.PreviewImage {
    display: none;
    opacity: 25%;
}

.PreviewImage,
.filterTitle {
    height: 100px;
}

/* Filter By Title */
.filterTitle,
.blogposts {
    padding-bottom: 20px;
}

.filterTitle select {
    padding: 7px;
    margin-left: 20px;
    margin-right: 20px;
}

.blogposts {
    padding-top: 20px;
}

.blog-post:hover {
    border-width: 6px;
}

.BlogContent {
    min-height: 300px;
}

.DisplayBlogPosts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    place-items: center;
    align-items: stretch;
}

.blog-post {
    width: 75%;
    padding: 20px;
    justify-content: start;
}

.blog-post,
.CreateBlogPostButton button {
    margin-bottom: 20px;
}

.blog-post img {
    width: 100%;
}

.CreateBlogPostButton button {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 300px;
    margin-top: 20px;
}

.CreateBlogPostButton button:hover {
    cursor: pointer;
}