/* reset */
body {
    margin: 0;
    background: #f3e5f5; /* lavender */
    font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif;
}

/* top bar */
.navbar {
    background: #fff5f0; /* peach */
    padding: 16px 32px;
    border-bottom: 6px solid #d7bde2;
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;
    font-size: 18px;
}

.navbar .logo {
    font-size: 28px;
    color: #b39ddb;
}

.navbar a {
    justify-content: center;
    color: #b39ddb;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 20px;
    transition: 0.2s;
}

.navbar a:hover {
    background: #d7bde2;
    color: white;
    border-radius: 0px;
}

/* content */
.content {
    margin: 40px auto;
    padding: 40px;
    background: #fff5f0;
    border: 6px solid #d7bde2;
    box-shadow: 10px 10px 0 #d4a8b0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 800px;
    width: 90%;
    min-height: 200px;
    border-radius: 20px;
}

.content h1 {
    color: #b39ddb;
    font-size: 42px;
    margin-top: 0;
}

.content p {
    color: #b39ddb;
    font-size: 18px;
    margin: 6px 0 0 0;
}

/* forum container — expands to fill the screen */
.forum-container {
    width: 90vw;
    max-width: 800px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    background: #fff5f0;
    border: 6px solid #d7bde2;
    border-radius: 20px;
    box-shadow: 10px 10px 0 #d4a8b0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* individual post block — rectangle with old forum style */
.forum-post {
    background: #f3e5f5;
    border: 3px solid #d7bde2;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: inset 0 0 10px rgba(179, 157, 219, 0.2);
}

/* post header: author + date */
.post-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #b39ddb;
    border-bottom: 2px dotted #d7bde2;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.post-author {
    font-weight: bold;
    color: #4a2c4a;
}

.post-date {
    color: #b39ddb;
}

/* post body text */
.post-body p {
    color: #4a2c4a;
    font-size: 16px;
    margin: 6px 0;
}

.post-body img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 10px;
}

#blog-container input {
    font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif;
}
#blog-container button {
    font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif;
}
#forum-feed {
    scrollbar-width: thin;
}
#forum-feed::-webkit-scrollbar {
    width: 8px;
}
#forum-feed::-webkit-scrollbar-thumb {
    background: #d7bde2;
    border-radius: 10px;
}