Day 315

Rebuilt the menu with CSS Grid and reduced the code by over 50%.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

header {
  position: fixed;
  width: 100%;
  max-width: 1400px;
  z-index: 5;
  #header-nav {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    padding: 0 1rem;
    background: #000;
    background-color: #000;
    #left-side {
      display: grid;
      justify-content: start;
      align-content: center;
      #logo {
        a {
          img {
            margin-top: 3px;
            width: 105px;
            border: 1px solid gray;
            border-radius: 1rem;
            &:hover {
              -webkit-box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);
              -moz-box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);
              box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);
            }
          }
        }
      }
    }
    #center,
    #right-side {
      display: grid;
      align-content: center;
      .menu {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 1rem;
        .menu-links {
          padding: 0.5rem 1.7rem;
          border-radius: 0.5rem;
          background: #cedce7; /* Old browsers */
          background: -moz-radial-gradient(
            center,
            ellipse cover,
            #cedce7 0%,
            #596a72 100%
          ); /* FF3.6-15 */
          background: -webkit-radial-gradient(
            center,
            ellipse cover,
            #cedce7 0%,
            #596a72 100%
          ); /* Chrome10-25,Safari5.1-6 */
          background: radial-gradient(
            ellipse at center,
            #cedce7 0%,
            #596a72 100%
          ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          font-weight: 600;
          color: rgb(5, 73, 5);
          text-decoration: none;
          font-weight: 600;
          &:hover {
            background: #596a72; /* Old browsers */
            background: -moz-radial-gradient(
              center,
              ellipse cover,
              #596a72 0%,
              #cedce7 100%
            ); /* FF3.6-15 */
            background: -webkit-radial-gradient(
              center,
              ellipse cover,
              #596a72 0%,
              #cedce7 100%
            ); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(
              ellipse at center,
              #596a72 0%,
              #cedce7 100%
            ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          }
        }
      }
    }
    #center {
      justify-content: center;
    }
    #right-side {
      justify-content: end;
    }
  }
}