nav {
  display: grid ;
  grid-template-columns: 45%  35% 20%;
  border-bottom: 3px solid #111;
  background: linear-gradient(
    to right, 
    rgba(17, 17, 17, 0.8), 
    rgba(55, 55, 55, 0.8)
  );
}
nav .nav-1{ grid-area: 1/1/2/2; }
nav .nav-2{ 
  grid-area: 1/2/2/3; 
  line-height: 2.25rem;  
}
nav .nav-3{ 
  grid-area: 1/3/2/4; 
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


nav a{
  text-decoration: none;
}
.nav-link {
  padding: 0.5rem 0.35rem;
}

.nav-link.active {
  color: cadetblue;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  pointer-events: none; /* Prevent clicking when active */
}


.nav-link:hover {
  color: cadetblue;
  border-radius: 5px;
}


nav a:link { color: white; }
nav a:visited { color: white; }
nav a:hover { color: lightgreen; }
nav a:active { color: white; } 

@media screen and (max-width: 768px) {

}


@media screen and (max-width: 480px) {
  nav {
    display: grid ;
    grid-template-columns: 50% 50%;
  }

  nav .nav-2{ grid-area: 2/1/3/3; }
  nav .nav-1{ grid-area: 1/1/2/2; }
  nav .nav-3{ grid-area: 1/2/2/3; }
  
}