#leftBar.open {
    width: 250px;
}

#leftBar {
    background-color: #F2F4F3;
    height: calc(100vh - 160px);
}

#leftBar.dark {
    background-color: #202020;
}

#leftColumnContent {
    display: grid;
    gap: 10px;
    justify-content: center;
    grid-template-columns: 100%;
    padding: 10px 0;
    height: 97.5%;
    align-content: space-between;
}

.lcOption {
    width: 85%;
    height: 55px;
    border-radius: 10px;
    background: linear-gradient(145deg, #2b2b2b, #242424);
    justify-self: center;
    color: #5b5b5b;
    padding: 10px 10px;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    align-content: center;
    justify-content: center;
    font-family: "Cinzel", serif;
        color: #b77d3b;
}

#toogleSideBarButton, .lbButton {
    width: 30px;
    height: 30px;
    display: grid;
    align-content: center;
    justify-content: center;
    border: 2px solid #653d14;
    background: #b77d3b;
    BORDER-RADIUS: 5px;
    margin: 0 auto;
    cursor: pointer;
}

#leftBar.open #toogleSideBarButton {
    margin: 0 0 0 83%;
}

.lbButton {
    display: none;
}

#leftColumnContentUpper {
    display: grid;
    gap:10px
}