.navbar {
    display: flex;
    padding-left: 1rem;
    margin-top: 1rem;
    padding-right: 2rem;
    align-items: center;
}

@media only screen and (max-width: 600px) {
    .navbar > a:first-child {
        margin: auto;
    }
    .navbar {
      display: flex;
      flex-direction: column;
      padding: 0;
    }
  }

.navbar > .logo{
    font-size: 32px;
}

.navbar > a {
    cursor: pointer;
    color: var(--color);
    text-decoration: none;
    margin: 0 1rem;

}

.navbar > a:first-child {
    margin-right: auto;
}

.navbar > a.active, .navbar > a:hover:not(:first-child) {
    border-bottom: 1px solid var(--color);;
}