.datetime {
            font-size: 0.9em;
            color: gray;
        }

        header, footer {
            padding: 10px;
        }
        #creator-box {
            display: none;
            padding: 10px;
            border-top: 1px solid #ccc;
        }
        .toggle-arrow {
            display: block;
            text-align: center;
            font-size: 24px;
            cursor: pointer;
            margin: 10px 0;
        }
        #hamburger {
            position: absolute;
            top: 10px;
            left: 10px;
            cursor: pointer;
            font-size: 24px;
        }
        #menu {
            display: none;
            position: absolute;
            top: 40px;
            left: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        #menu form, #menu a {
            display: block;
            margin: 5px 0;
        }
        #logo {
            display: block;
            margin: 0 auto;
            max-width: 75%;
        }


body {
    background:var(--bg); 
    margin:0;
    
}
header, footer {
    background: var(--header);
    color: var(--glyph);
    
}
.post {
    background: var(--post);
    color:var(--post-text);
    
}
input,button,select {
    background:var(--button);
    color:var(--ui-text);
    
}
#creator-box {
    background: var(--header);
    
}
#menu {
    background: var(--menu);
    color: var(--menutext);
    
}
#menu form, #menu a {
    color: var(--ui-text);
    
}


.post { 
    border: 2px solid #aaa; 
    margin: 10px; 
    margin-top:5px; 
    padding: 25px;
    border-radius: 5px; 
    
}
#search {
    margin:5px;
    padding:2px;
    
}
#view-switcher {
    margin:5px;
padding:2px;
    
}
#postbutton {
vertical-align: top;
width:30px;
height:30px; 
text-align:center; 
display:inline;
}


/* One-column view */
#post-container.one-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#post-container.one-column .post { 
    flex: 0 0 80%;
}

/* Two-column view */
#post-container.two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#post-container.two-column .post { 
    flex: 0 0 calc(45%); /* subtracting margin space */
}

/* Three-column view */
#post-container.three-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#post-container.three-column .post { 
    flex: 0 0 calc(28%);
}

.pinned-post {
    width: 100% !important;
    max-width: 80% !important;
    flex: 0 0 80% !important;
    border: 2px solid var(--pinned-post);
    grid-column: 1 / -1 !important; /* If using grid */
    order: -1; /* Keeps it above normal posts in flex layouts */
}

.pinned-post img,
.pinned-post video {
    max-width: 100%;
    height: auto;
}

.post img,
.post video {
    max-width: 100%;
    height: auto;
}