WebHero - 6 - Navbar responsive styling

Nav.pcss

  nav {
    @apply w-full flex items-center justify-between flex-wrap bg-orange-600 p-4;
  }

  .logo-container {
    @apply flex items-center flex-shrink-0 text-white mr-6;
    order: 0;
  }

  input[type="search"] {
    @apply appearance-none border w-full py-1 px-2 text-gray-700 mt-3;
    order: 1;
  }

  input[type="search"]:focus {
    @apply outline-none shadow-outline;
  }

  .links-container {
    @apply flex-grow flex items-center w-auto ml-6;
    order: 0;
  }

  .svg-black {
    stroke: black;
    fill: black;
  }

  @screen sm {
    input[type="search"] {
      @apply w-1/2 mt-0;
      order: 0;
    }
  }