.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header .avatar {
  width: 60px;
  border-radius: 45px;
  transition: transform 0.1s ease;
}

.header .avatar:active {
  transform: translateY(2px);
}

nav ul {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  align-content: start;
  align-items: start;
}

nav a {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  justify-content: center;
  color: var(--tx-2);
  border-radius: 40px;
  background-color: transparent;
  padding: 10px 16px;
  /* line-height: 1; */
  text-decoration: none;
  align-self: stretch;
  transition: transform 0.1s ease;
}

nav a:hover {
  color: var(--tx);
  text-decoration: none;
  background-color: var(--bg-2);
}

nav li:active {
  transform: translateY(2px);
}

nav .active {
  background-color: var(--bg-2);
  color: var(--tx);
}

nav a:hover .badge,
nav .active .badge {
  background-color: var(--bg-3);
}

nav li {
  list-style-type: none;
}

@media screen and (max-width: 350px) {
  .header {
    flex-direction: column;
    gap: 2rem;
  }
}