.sidebar {

    flex-shrink: 0;
    height: calc(100vh - var(--top-bar-height));
    overflow-y: hidden; /* Disable scrolling */
    background-color: var(--sidebar);
    transition: transform 0.3s ease;

}
.sidebar.hidden {
    transform: translateX(-100%); /* Hide sidebar off-screen */
}
.sidebar h1{
  font-size: 10px;
}
.rightsidebar {

    flex-shrink: 0;
    height: calc(100vh - var(--top-bar-height));
    overflow-y: hidden; /* Disable scrolling */
    background-color: var(--sidebar);
    transition: transform 0.3s ease;
 
}
.rightsidebar.hidden {
    transform: translateX(100%); /* Hide sidebar off-screen */
}
.rightsidebar h1{
  font-size: 10px;
}
.sidebarcontent {
  margin-bottom: clamp(15px, 2vw, 20px);
  padding: clamp(5px, 2vw, 10px);
}

.sidebarcontent h2 {
  color: var(--lightbg);
  margin: 0 0 clamp(10px, 1.5vw, 15px);
  font-size: clamp(18px, 3vw, 20px);
}

.sidebardialog {
  background-color: var(--lightbg);
  border-radius: 4px;
  margin-bottom: clamp(5px, 1vw, 10px);
}

.sidebardialog-header {
  background-color: var(--main-ink);
  padding: clamp(3px, 2vw, 5px);
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(10px, 3vw, 12px);
  color:var(--logotext);

}

.sidebardialog-header:hover {
  background-color: var(--hover);
}

.sidebardialog-content {
  display: none;
  padding: clamp(5px, 2vw, 8px);
  font-size: clamp(10px,3vw,12px);
  color: white;
  overflow-wrap: break-word;
}

.sidebardialog-content.show {
  display: block;
}

.sidenav-item {
  background-color: var(--postcontent);
  padding: clamp(7px, 2vw, 10px);
  margin-bottom: clamp(3px, 1.5vw, 6px);
  border-radius: 4px;
  display: flex;
  align-items: center;

}