Auto merge of #4170 - Turbo87:header-shadows, r=locks

Header: Add drop shadows to main elements

### Before

![2021-11-12 17 36 47 localhost 6fd786e02624](https://user-images.githubusercontent.com/141300/141501991-3edcba3b-73bd-4f15-a7df-a3d823800e18.png)

### After
![2021-11-12 17 36 15 localhost 01e3e91540f7](https://user-images.githubusercontent.com/141300/141501996-7afe1a6c-1633-41e4-aff3-546b6213b4c3.png)

Author: bors

app/components/header.module.css

@@ -88,8 +88,9 @@
     display: none;
     margin: 0 0 20px;
     font-size: 45px;
-    color: #dfffdb;
     text-align: center;
+    color: white;
+    text-shadow: 1px 3px 2px var(--green900);
 
     .hero & {
         display: block;

app/components/search-form.module.css

@@ -3,6 +3,8 @@
 }
 
 .input {
+    --search-form-focus-shadow: 0 0 0 4px var(--yellow500);
+
     font-size: 90%;
     border: none;
     color: black;
@@ -14,7 +16,7 @@
     background-position: 6px 6px;
     background-size: 14px 15px;
     border-radius: 15px;
-    box-shadow: none;
+    box-shadow: 1px 2px 4px 0 var(--green900);
     transition: box-shadow 150ms;
 
     .size-big & {
@@ -26,7 +28,8 @@
 
     &:focus {
         outline: none;
-        box-shadow: 0 0 0 4px var(--yellow500);
+        box-shadow: var(--search-form-focus-shadow),
+            1px 2px 3px 4px var(--green900);
     }
 }
 

app/styles/application.module.css

@@ -16,6 +16,7 @@
 
     --main-color: #383838;
     --main-color-light: #858585;
+    --main-shadow-color: var(--green900);
     --main-bg: #f9f7ec;
     --main-bg-dark: #edebdd;
     --gray-border: #d5d3cb;
@@ -106,8 +107,10 @@ noscript {
     display: flex;
     justify-content: center;
     width: 100%;
+    position: relative;
     background-color: var(--main-bg);
     color: var(--main-color);
+    box-shadow: 0 0 6px 0 var(--main-shadow-color);
 }
 
 .inner-main {