body {
   background: #f2f2f2;
   margin: 0;
 }

 nav {
   position: sticky;
   top: 0;
   background: white;
   z-index: 10;
   border-bottom: 1px solid #d9d9d7;
   padding: 0px 40px;
   display: flex;
 }

 nav a, .dropdown span {
   padding: 0 20px;
   text-decoration: none;
   color: #777;
   font-size: 18px;
   transition: color 0.2s ease;
   letter-spacing: 0.05rem;
 }

  .home-link {
   display: inline-flex;
   color: #777;
   padding: 20px;
   border-radius: 10px;
   text-decoration: none;
   vertical-align: sub;
 }

 .home-icon {
   width: 18px;
   height: 18px;
   fill: currentColor;
 }


 @media screen and (max-width: 768px) {
   nav a, .dropdown span {
     font-size: 12px;
     padding: 0 10px;
   }

  .home-link {
    padding: 15px;
  }

   .home-icon {
   width: 12px;
   height: 12px;
 }
 }

 /*rework*/
 nav a.active {
   color: #000;
   font-weight: 600;
   border-bottom: 2px solid #baff00;
   padding-bottom: 4px;
 }

 nav a:not(.active):hover {
   background-color: #baff00;
   color: #000;
 }


 .nav-overlay {
   opacity: 0;
   pointer-events: none;
 }


 .dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.dropdown span {
  cursor: default;
  border-bottom: 2px solid transparent;
}

.dropdown:hover span {
  color: #000;
  font-weight: 600;
}


.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  border: 1px solid #d9d9d7;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  z-index: 1;
}


@media (hover: hover) {
  .dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (hover: none) {
  .dropdown span {
    cursor: pointer;
  }

  .dropdown.open .dropdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.dropdown-content a {
  display: block;
  margin: 10px 20px;
  padding: 0 10px;
  white-space: nowrap;
}