.icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        filter: grayscale(1);
        transition: transform 0.15s ease;
        cursor: pointer;
    }

    .icon:hover {
        filter: grayscale(0);
        transform: scale(1.2);
    }

    header {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    nav {
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50px;
      
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: fixed;        /* stays on scroll */
      top: 20px;              /* distance from top */
              /* horizontal center */

      z-index: 1000;
      width: 700px;
      height: 70px;
    }


    nav div {
      list-style: none;
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
      width: 33.333vw;
      height: 100%;
    }


    button {
      background-color: white;
    }

    .left-section {
      display: flex;
      justify-content: space-around;
    }

    .left-section a {
      text-decoration: none;
      color: white;
      font-family: "Prince";
      font-weight: 500;
      font-size: 2vh;
      font-weight: 300;
      color: rgb(173, 38, 38);
      text-shadow: 0 0 5px rgb(160, 43, 43);
      transition: color 0.5s;
    }

    .left-section a:hover,
    .right-section a:hover {
      color: rgb(211, 189, 189);

    }

    .middle-section {
      display: flex;
      justify-content: center;
    }

    .right-section {
      display: flex;
      justify-content: space-around;
    }

    .right-section a {
      text-decoration: none;
      color: white;
      font-family: "Prince";
      font-weight: 500;
      font-size: 2vh;
      color: rgb(173, 38, 38);
      text-shadow: 0 0 5px rgb(160, 43, 43);
      transition: color 0.5s;
    }

    .hire-me-button {
      background: black;
      border: 2px solid rgb(173, 38, 38);
      border-style: ridge;
      background-size: cover;
      height: 60%;
      width: 45%;
      border-radius: 50px;
      color: rgb(173, 38, 38);
      cursor: pointer;
      text-shadow: 0 0 5px rgb(160, 43, 43);
      transition: background-color 0.75s ease-in-out, color 0.75s ease;
    }

    .hire-me-button:hover {
      color: rgb(211, 189, 189);
      background-color: rgb(78, 27, 27);
    }


  @font-face {
    font-family: "Prince";
    src: url("../OptimusPrinceps.ttf");
  }

  


@media (max-width: 712px) {
    header {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    p {
      font-size: 20px;
    }

    nav {
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50px;
      
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: fixed;        /* stays on scroll */
      top: 20px;              /* distance from top */
              /* horizontal center */

      z-index: 1000;
      width: 90%;
      height: 70px;
    }


  }