Responsive styling of header.

frontend/src/app/components/header/header.component.scss

@@ -60,6 +60,12 @@ $headerHeight: 3.5em;
     
                 .title {
                     font-size: 1.5em;
+                    opacity: 0;
+                    transition: opacity .2s ease-in-out;
+
+                    @media screen and (min-width: 600px) {
+                        opacity: 1;
+                    }
                 }
             }
         }
@@ -69,9 +75,38 @@ $headerHeight: 3.5em;
             
             .search-bar {
                 flex: 1;
-                max-width: 50em;
                 $borderRadiusValue: 10em;
                 position: relative;
+                max-width: 12em;
+                transition: max-width .2s ease-in-out;
+                
+                @media screen and (min-width: 435px) {
+                    max-width: 16em;
+                }
+
+                @media screen and (min-width: 500px) {
+                    max-width: 20em;
+                }
+
+                @media screen and (min-width: 700px) {
+                    max-width: 24em;
+                }
+
+                @media screen and (min-width: 800px) {
+                    max-width: 32em;
+                }
+
+                @media screen and (min-width: 900px) {
+                    max-width: 38em;
+                }
+
+                @media screen and (min-width: 1000px) {
+                    max-width: 45em;
+                }
+
+                @media screen and (min-width: 1100px) {
+                    max-width: 50em;
+                }
 
                 input {
                     flex: 1;