/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4rem;
  padding: 1rem 1rem 1rem 1rem;
  
  /*background-color: rgb(124, 143, 222); /* #f8f9fa; */
  z-index: 1050;
  transition: width 0.1s ease-in-out;
}

/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
  width: 30rem;
  /*background-color: rgb(255, 255, 255);*/
}



/* container for the sidebar header. make sure the contents don't wrap when
 * the sidebar is collapsed.

.sidebar-header {
  display: flex;
  height: 10 px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}  */


/* */
#header-icon {
    opacity: 1;
}

/* */
.sidebar:hover #header-icon {
    opacity: 1;
}

#color-scheme-toggle{
  opacity: 0;
}

#shuffle-scheme-toggle{
  opacity: 0;
}
/* */
.sidebar:hover #color-scheme-toggle {
  opacity: 1;
}
.sidebar:hover #shuffle-scheme-toggle{
  opacity: 1;
}
#close-menu{
  opacity: 0;
}

/* */
.sidebar:hover #close-menu {
  opacity: 1;
}

/* */
.filter {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
/* */
.sidebar:hover .filter {
  opacity: 1;
}



/* position the header relative to the logo and hide by default */
 #header-welcome {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.sidebar:hover  #header-welcome {
  opacity: 1;
}




@media screen and (max-width: 950px) {
  .sidebar{
    position: static;
    top: 0;
    width: 100%;
    overflow: hidden;
    /*background-color: rgb(255, 255, 255);*/
    
    /*padding: 1rem 1rem 1rem 1rem;
    /*background-color: $secondary; /* #f8f9fa;*/
    z-index: 1050;
    /*transition: width 0.1s ease-in-out;*/
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover {
    width: 100%;
    /*background-color: rgb(255, 255, 255);*/
    
  }
}
@media screen and (max-width: 950px) {
  .sidebar #header-icon {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover #header-icon {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar #close-menu {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover #close-menu {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar .filter {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover .filter {
    opacity: 1;
    width: 100%;
  }
}
@media screen and (max-width: 950px) {
  .sidebar #header-welcome {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover #header-welcome {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar #color-scheme-toggle {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar #shuffle-scheme-toggle {
    opacity: 1;
  }
}

@media screen and (max-width: 950px) {
  .sidebar:hover #color-scheme-toggle {
    opacity: 1;
  }
}
@media screen and (max-width: 950px) {
  .sidebar:hover #shuffle-scheme-toggle {
    opacity: 1;
  }
}
/*
@media screen and (max-width: 950px) {
  #sidebar-collapse {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
 */
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  /* min-height: 100vh;*/
  row-gap: 3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  /*margin-left: 1rem;*/
  /*margin-right: 1rem;*/
}