Fix the header style to be less messy

The header styling used to be a wild mixture of different (random) measurements that did not correlate to anything and were chosen by eyeballing.

This now has been remedied by * Using a flex layout for the header elements * Removing unused styling from header_transition.svg * Using measurements related to viewport size for the header * Fixing the issue were the logo-link boundaries were shifted against the displayed image * Properly aligned header logo and navigation at a common center line * Using viewport-related measurements for transitions