* {

    box-sizing: border-box;

}

html,

body {

    margin: 0;

    padding: 0;

    width: 100%;

    font-family: "Lexend", sans-serif;

    font-optical-sizing: auto;

}

#DivMainContainer {

    display: grid;

    max-width: 1200px;

    grid-template-columns: 1fr 3fr;

    margin-left: auto;

    margin-right: auto;

}



#DivLeftContainer {

    background-color: #eeeeee;

    padding: 1rem;

}

#DivRightContainer {

    background-color: #f7f7f7;

    padding: 1rem;

}



.DivPost {

    display: flex; 

    width: 600px;

    margin-left: auto;

    margin-right: auto;

    background-color: #dddddd;

}

.top-wrapper {

    width: 100%;

    background-color: #6688bb;

}

.topbar {

    margin-left: auto;

    margin-right: auto;

    max-width: 1200px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.25rem 0;

    background-color: #446699;

}



.topbar a {

    color: white;

    text-decoration: none;

}



#DivMenuContainerLeft {

    display: flex;

    align-items: center;

    justify-content: center;

}

.author {

    margin: 0.5rem;

    float: left;

}

#InputSearchField {

    font-size: 16px;

    padding: 0.5rem;

    border-radius: 4px;

    border: 1px solid #ccc;

}

.top-icon {

    font-size: 24px;

    margin-right: 10px;

}



.DivCommunityLowerSection {

    display: flex;



    justify-content: space-between;

}