.hide {
  display: none;
}

.invisible {
  visibility: hidden
}

/* For Firefox Browser */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}

/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
  width: 20px;
}

.scrollbar::-webkit-scrollbar-track { 
  background: #fff;
}

.scrollbar::-webkit-scrollbar-thumb { 
  background:#000;
}

.dark body {
  background-color: #151515;
  color: #ddd;
}

#dark-mode-toggle{
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
  border: 0px solid;
  float: right;
  margin-right: 45%;
}

nav {
  width: 55%;
  display: flex;
  justify-content: space-between;
}

nav a {
    padding: 0.5em;
}

nav span.active {
  background-color: #151515;
  color: #ddd;
  border-radius: 4px;
  /* vertical-align: middle; */
    padding: 0.5em;
    text-align: center;
}
.dark body nav span.active {
  background-color: #fffff8;
  color: #111;
}

footer {
  width: 55%;
  display: flex;
  justify-content: space-between;
}

footer div {
    display: inline-flex;
    padding: 0 0 3em 3em;
}

[dir="rtl"] {
  margin-inline-start: 45%;
}

.list-none {
    list-style-type: none;
}
.bibicons {
  float: left;
  display: inline-flex;
  padding: 0;
  margin-left: -6em;
  font-size: 75%;
}

@media (max-width: 576px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    nav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
    }
}