/* desktop-menu styles */
/* Tablets */
.sidebar {
  display: none; /* Hide sidebar on mobile */
}
.options {
  display: flex;
  flex-direction: column;
  /*
  padding-top:calc(var(--padding) * 0.5);
  padding-bottom: var(--padding);
  */
  margin-left: 12px;
  border-radius: var(--border-radius);
  font-family: var(--font-family);
}
.options p {
  padding-left: 8px;
  background-color: var(--button-color);
  color: var(--text-color-primary);
  border-radius: var(--border-radius);
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 24px;
}
.article-option {
  margin-top: calc(var(--padding) * 0.5);
  padding-left: 8px;
  display: flex;
  width: 100%;
  border-radius: var(--border-radius);
  transition: 0.05s;
  cursor: pointer;
  padding-top: 4px;
  padding-bottom: 4px;
}
.article-option a {
  text-decoration: none;
  color: var(--text-color-primary);
}
.article-option:hover {
  background-color: var(--button-hover-color);
}
.article-option:active {
  background-color: var(--background-color);
}

@media (min-width: 768px) { 
  .sidebar.active {
    display: block; /* Show sidebar on desktop */
    width: 200px;
    /*
    background-color: var(--background-color);
    background-color: lightblue;
    */
    padding-top: var(--navbar-height);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /*
    padding-left: calc(var(--padding) * 0.2);
    */
  } 
}

/* Laptops and desktops */
@media (min-width: 1024px) { 
    
}

/* Large screens and desktops */
@media (min-width: 1280px) { 
    
}

/* Ultra large screens and desktops */
@media (min-width: 1536px) { 
    
}