Header styles for small screens

components/header/style.module.css

@@ -141,3 +141,80 @@ h1.title a:hover {
 .container ul li a:hover {
   border-bottom: solid 1px black;
 }
+
+
+@media (max-width: 900px) {
+  .logo {
+    display: none;
+  }
+
+  h1.title {
+    margin-top: 0;
+    text-align: left;
+    position: initial;
+    padding-top: 10px;
+    margin-bottom: 0;
+    margin-left: 20px;
+    width: auto;
+  }
+
+  ul.primaryNav {
+    position: initial;
+    float: none;
+    width: 383px;
+    margin-left: 20px;
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 650px) {
+  .container {
+    height: 75px;
+  }
+
+  h1.title {
+    font-size: 20px;
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+  }
+
+  ul.primaryNav {
+    width: auto;
+    margin-left: 0;
+    padding-bottom: 10px;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 500px) {
+  .container {
+    height: auto;
+  }
+
+  h1.title {
+    font-size: 20px;
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    width: 100%;
+    text-align: center;
+    margin: 0;
+  }
+
+  ul.accountNav {
+    float: none;
+    width: 100%;
+    text-align: center;
+    position: relative;
+    top: -10px;
+    right: 0;
+    padding-left: 0;
+  }
+}