.topnav {
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
   max-width: 74ch;
}

.topnav a {
   float: left;
   display: block;
   text-align: center;
   padding: 7px 8px 0 8px;
   text-decoration: none;
   font-size: 17px;
   color: #FC0200;
}
/*
.topnav a:hover {
   background-color: #ddd;
   color: black;
}
*/
.topnav .icon {
   display: none;
}

.linkEffect {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #FC0200;
    transition: color 0.3s ease;
}

/* Effect one: Underline - Inside Out */
.linkEffect--insideOut::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 4px;
    bottom: -1px;
    left: 50%;
    background-color: #FC0200;
    transition: width 0.3s ease, left 0.3s ease;
}

.linkEffect--insideOut:hover::before {
    width: 100%;
    left: 0;
}

@media screen and (max-width:768px) {
   .topnav a:not(:first-child) {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }

   .topnav.responsive {
      position: relative;
   }

   .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
   }

}