.sidebar {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 0;
      z-index: 1000;
      background-color: var(--sidebar-color);
      opacity: 1;
      transition: 0.5s;
      overflow-x: hidden;
      padding: 8em 0 2em 0;
      outline: 0;
    }

    .sidebar.bordered {
      border-top: none;
      border-right: none;
      border-bottom: none;
      border-left: var(--border-size) solid var(--sidebar-border-color);
    }

    .sidebar.active {
      width: var(--sidebar-w);
    }


    .sidebar a {
      padding: 0.2em 0.2em 0.2em 2em;
      text-decoration: none;
      font-size: var(--font-100);
      font-weight: lighter;
      color: var(--sidebar-text-color);
      display: block;
      white-space: nowrap;
      transition: 0.5s;
    }

    .sidebar hr {
      border-top: var(--border-size) solid var(--sidebar-border-color);

    }

    .sidebar a:hover {
      color: var(--primary-color);
    }

    .sidebar .close-button {
      position: absolute;
      top: 1.65em;
      right: 1.65em;
      font-size: var(--font-175);
    }

    a.close-button:hover {
      color: var(--standard-red);
    }

    @media screen and (max-height: 450px) {
      .sidebar {
        padding-top: 1.5em;
      }

      .sidebar a {
        font-size: var(--font-125);
      }
    }