nav ul {
  position: absolute;
  top: 24;
  left: 24;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: left;
  gap: 0.2rem;
  align-content: start;
  align-items: start;
  margin: 0px;
  font-size: 30px;
}

nav a {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  color: var(--tx);
  border-radius: 40px;
  background-color: transparent;

  /* line-height: 1; */
  text-decoration: none;
  align-self: stretch;
  transition: transform 0.1s ease;
}

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

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

nav .active {
  color: var(--decoration);
}

nav a .badge {
  margin-top: 6px;
}
/* 
nav a:hover .badge,
nav .active .badge {
  background-color: var(--bg-3);
} */

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

@media screen and (max-width: 480px) {
  nav ul {
    position: relative;
    flex-direction: row;
    gap: 0rem 1rem;
    font-size: 20px;
    align-items: baseline;
    justify-content: center;
    top: 0;
    left: 0;
  }
}