.navigation {
  grid-area: 1 / 9 / 9 / 12;
}


.navList {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2.5rem;
  list-style-type: none;
  height: 100%;
}

.navItem:last-child {
  margin-top: auto;
}

.navItem {
  font-size: 1.5rem;
  width: 100%;
}

.navItem:hover {
  animation: jello 1s;
}

.navIcon {
  fill: white;
  height: 1.5rem;
  width: auto;
}

.navLink {
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.navLink.active span {
  border-bottom: 1px solid white;
  font-weight: bold;
  transition: font-weight 0.3s ease, border-bottom 0.3s ease;
}

.navigation.light .navLink {
  color: #333;
}

.navigation.light .navLink.active span {
  border-color: #333;
}

.navigation.light .navIcon {
  fill: #333;
}


@media screen and (max-width: 450px) {
  .navigation {
    grid-area: 1/1/2/5;
  }

  .navList {
    flex-direction: row;
  }
  .navLink span {
    display: none; /* Hide the text */
  }

}