/* Main Page */
.blogBody {
    background-color: #428606;
    background-image: url("../images/blog-bg2.png");
    background-attachment: fixed;
    font-family: "Jersey 15", sans-serif;
}

.jersey-15-regular {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.blogContainer {
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 25% 75%;
    grid-template-rows: 15% 70% 15%;
    width: 1000px;
    height: 1000px;
    margin-top: 10px;
}

        .blogHeader {
            grid-area: header;
            background-color: black;
            background-image: url("../images/wood-texture.png");
            background-repeat: repeat;
            color: white;
        }
                .blogHeader h1 {
                    font-size: 70px;
                    text-align: center;
                    letter-spacing: 5px;
                    margin-top: 25px;
                    margin-bottom: 0px;
                }
        .blogNav {
            grid-area: nav;
            background-color: #4c648c;
            background-image: url("../images/mc-clay.png");
            background-repeat: repeat;
            color: white;
        }
                .blogNav hr {
                    border: 30px solid black;
                    }
                .blogNavCategories {
                    background-color: black;
                    color: gray;
                    font-size: 30px;
                    text-align: center;
                    grid-area: nav;
                    margin-bottom: 10px;
                    margin-top: 0px;
                }
                .blogNavHome {
                    background-color: black;
                    color: gray;
                    font-size: 30px;
                    text-align: center;
                    grid-area: nav;
                    margin-bottom: 10px;
                    margin-top: 30px;
                }
        .blogContent {
            grid-area: content;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
        }

        .blogFooter {
            grid-area: footer;
            background-color: black;
            background-image: url("../images/wood-texture.png");
            background-repeat: repeat;
            color: white;
        }


/* Buttons */
.blogCurrent {
        background-color: #190751;
        color: lightgray;
        width: 100%;
        font-family: "Jersey 15", sans-serif;
        font-size: 25px;
        border: none;
        margin: auto;
        margin-bottom: 2px;
        padding: 5px;
    }
    .blogCurrent:hover {
        background-color: #190751;
        cursor: default;
    }
    .blogCurrent:active {
        background-color: #190751;
        cursor: default;
    }

.blogInactive {
        background-color: black;
        color: white;
        width: 100%;
        font-family: "Jersey 15", sans-serif;
        font-size: 25px;
        border: none;
        margin: auto;
        margin-bottom: 2px;
        padding: 5px;
    }
    .blogInactive:hover {
        background-color: #190751;
        cursor: pointer;
    }
    .blogInactive:active {
        background-color: #29136c;
        cursor: pointer;
    }



/* Blog Content */
#blogContentContainer {
    width: 92%;
    height: 92%;
    margin: auto;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    background-color: white;
    background-image: url("../images/mc-clay.png");
    background-repeat: repeat;
    overflow: scroll;
}

/* Blog Posts */
.blogPostContainer {
    background-color: rgba(153, 204, 255,.4);
    width: 95%;
    border: 2px solid black;
    margin-bottom: 20px;
}
    .blogPostHeader {
        border-bottom: 2px solid black;
        background-color: rgba(153, 204, 255,.5);
        color: black;
        font-size: 25px;
        padding: 5px 10px 5px 10px;
    }
            .blogPostButton::marker {
                content: "🞂 "; /* 🞃 */
                color: black;
                font-size: 30px;
                padding: 0px;
                border: none;
            }
            .blogPostUl {
                margin: 0px;
            }
    .blogPostContent {
        color: black;
        font-size: 20px;
        margin: 10px;
    }
            .blogPostContent p {
                text-indent: 40px;
                margin-bottom: 5px;
                margin-top: 0px;
            }






/* Blog Categories Hide/Show */
.generalShow {
    display: block;
}
.hobbiesShow {
    display: block;
}
.daybreakShow {
    display: block;
}
.alwaysColderShow {
    display: block;
}
.otherStoriesShow {
    display: block;
}

.generalHide {
    display: none;
}
.hobbiesHide {
    display: none;
}
.daybreakHide {
    display: none;
}
.alwaysColderHide {
    display: none;
}
.otherStoriesHide {
    display: none;
}