/* --- Base Layout --- */
#main-menu { }
#content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.posts { flex: 1 1 65%; }
#sidebar { flex: 1 1 30%; padding-left: 2%; }

img { max-width: 100%; height: auto; }

/* --- Responsive Layout --- */
@media (max-width: 1350px) {
        .single { padding: 0; }
}
@media (max-width: 1180px) {
        .single { width: 100% !important; padding: 0; }
}
@media (max-width: 1024px) { 
        .posts { flex: 1 1 100%; } 
        #sidebar { flex: 1 1 100%; padding-left: 0; margin-top: 2rem; } 
        .post-title { font-size: 1.75rem; }
}
@media (max-width: 800px) {
        #content { margin: 0 auto; padding: 0 4%; }
        .posts { column-count: 1; width: 100%; }
        #sidebar { flex: 1 1 100%; width: 100%; } 
        #main-menu { position: relative; width: 90%; padding: 30px 5% 30px; }
        .logo { width: 100%; margin: 0; text-align: left; }
        #navigation { float: none; font-family: 'Hind', sans-serif; text-align: left; margin-top: 10px; }
        #navigation li { float: none; display: inline; line-height: 60px; margin: 0; }
        #navigation li a { padding: 0 10px; font-size: 90%; }
        #navigation li:first-child a { padding: 0 10px 0 0; font-size: 90%; }
        .single .post, .single .post-content, .single .post-head, .single .post-content p { width: 100%; margin: 0; padding: 0; }
        .single .post-head { padding-bottom: 10%; }
        .single .post-title { font-size: 2.5em; text-align: left; padding: 0 0 2% 0; }
        .single .post-meta { position: relative; }
        .single .post-meta time, .single .post-labels a, .single p a { display: inline; }
        #comments { margin: 0; }
        #comments-block ul li { padding: 0; }
        #comments-block .avatar-image-container	{ display: none; }
}
@media (max-width: 768px) {
        #content { flex-direction: column; padding: 0 5%; width: 90%; }
        .post-title { font-size: 1.5rem; text-align: left; }
        #content-box .post:first-child .post-title { font-size: 200%; font-weight: bolder; }
        .logo { width: 100%; font-size: 300%; text-align: left; float: none; }
        #navigation { text-align: left; float: none; }
        #navigation li { display: inline-block; margin: 0 5px 0 0; float: none; }
        #navigation li a { padding: 0 5px 0 0; font-size: 90%; }
}
@media (max-width: 480px) { body { font-size: 15px; } .post-title { font-size: 1.25rem; } #navigation li a { font-size: 80%; } }
@media screen and (max-width: 376px) { .posts { column-count: 1; } }
/* Portrait iPhone 5 */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { /* Custom styles can go here */ }