@media screen{

  .nav-bottom{
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100vw;

    display: flex;
    align-items: center;
    z-index: 2000;
    height: 3rem;

  }

  .nav-bottom .chapter-pagination__link {
    font-size: var(--fs-nav);
    font-family: var(--fontTitle);
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    padding-inline: 2ch;
    flex-shrink: 0;
  }

  .nav-bottom .chapter-pagination__link:hover{
    text-decoration: none;
    opacity: 0.55;

  }

  .loading-block{
     font-family: var(--fontTitle);
      font-size: var(--sign-size);
      letter-spacing: var(--sign-spacing);
      flex-grow: 1;
      min-width: 0;
      display: flex;
      opacity: 0.55;
      position: relative;
    top: -1px;
  }

  #loading{
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
}

@media screen and (max-width: 920px) {

  .nav-bottom{
    background-color: var(--color-bg);
  }

  .nav-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: calc(var(--baseline) * 2);
    background: linear-gradient(0deg, var(--color-bg) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }
  }

@media screen and (max-width: 640px) {

  .nav-bottom .chapter-pagination__link .chapter-pagination__text{
    display: none;
  }
  }