.navbar-brand {
  color:red;
}

.active {
  color:red!important;
}

.btn-red, .btn-red:hover {
  background-color:red;
  color:white;
  width:200px;
}

.hyphens {
  hyphens: auto;
  text-align: justify;
}

main a, a:hover {
  color: red;
}

.navbar-brand{
  max-width:70%;
}

:root{
      --sidebar-width: 300px;
      --mobile-header-h: 86px;
    }

    /* desktop */
    @media (min-width: 992px) {
      body {
        overflow: hidden;
      }

      .page-container {
        height: 100vh;
      }

      .sidebar-navbar {
        position: fixed;
        top: 0;
        width: var(--sidebar-width);
        height: 100vh;
        overflow-y: auto;
      }

      .sidebar-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
      }

      .sidebar-navbar .navbar-nav {
        flex-direction: column;
        width: 100%;
      }

      .content-area {
        margin-left: var(--sidebar-width);
        height: 100vh;
        overflow-y: auto;
      }
    }

    /* mobile */
    @media (max-width: 991.98px) {
      .content-area {
        margin-left: 0;
        min-height: calc(100vh - var(--mobile-header-h));
      }
    }