This is the first time I built a navigation menu from scratch and I can't get the active part to work. it should be if the home page is active it should be a different color but here that is not the case. Also, if you have any optimization ideas I'll take them. 

```css
@media only screen and (max-device-width: 1540px) {
  .middle {
    margin: 0 auto;
    justify-content: center;
    display: flex;
  }
  .middle a {
    padding: 5px;
    color: pink;
    -webkit-transition: color 1.2s;
    -moz-transition: color 1.2s;
    -ms-transition: color 1.2s;
    -o-transition: color 1.2s;
    transition: color 1.2s;
  }
  .middle a:active {
    color: pink;
  }
  .middle a:hover {
    color: black;
  }
}
```

```html
<nav>
  <div class="middle">
    <a href="/../Time%20out%20for%20Inc/Index/index.html" class="active">Home</a>
    <a href="/../Time%20out%20for%20Inc/contact/contacts.html">Contact Information</a>
    <a href="/../Time%20out%20for%20Inc/event/events.html">Activities</a>
    <a href="/../Time%20out%20for%20Inc/donations/donations.html">Ways You Can Help</a>
    <a href="/../Time%20out%20for%20Inc/application/applications.html">Application</a>
    <a href="/../Time%20out%20for%20Inc/video/videos.html">Videos</a>
    <a href="/../Time%20out%20for%20Inc/photo/photo.html">Photos</a>
    <a href="/../Time%20out%20for%20Inc/sponsor/sponsor.html">Sponsors</a>
  </div>
</nav>
```