Rewrite

src/scss/modules/_clock.scss

@@ -0,0 +1,9 @@
+.App-clock {
+    font-size: 4em;
+    margin: 0;
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}
+
+.App-ampm-specifier {
+  font-size: 0.5em;
+}

src/scss/modules/_credit.scss

@@ -0,0 +1,74 @@
+
+#location {
+    margin-bottom: -10px;
+}
+
+#location, #photographer  {
+    font-size: calc(10px + 1.2vmin);
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+    text-overflow: ellipsis;
+}
+
+#photographer {
+  position: absolute;
+  bottom: 10px;
+  left: 50px;
+  width: 1000px;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 15px;
+  left: 10px;
+}
+
+.personicon, .locationicon {
+  font-size: calc(10px + 1.2vmin);
+}
+
+.MuiSvgIcon-root {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  width: 100em; 
+  height: 100em;
+  font-size: 2rem; 
+  text-shadow: 0 2px 25px rgba(0,0,0,0.3);
+}
+
+.credits {
+    bottom: 2px;
+    left: 0px;
+    position: absolute;
+    text-align: left;
+    min-width: 50px;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+
+    .tooltiptext {
+        visibility: hidden;
+        background-color: black;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 20px;
+        position: absolute;
+        z-index: 1;
+        position: absolute;
+        bottom: 40px;
+        left: 60px;
+        margin-left: -60px;
+        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+        opacity: 0;
+        transition: opacity 1s;
+      }
+}
+    
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}

src/scss/modules/_greeting.scss

@@ -0,0 +1,5 @@
+.App-greeting {
+    margin: 0;
+    font-size: 1.6em;
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}

src/scss/modules/_miscellaneous.scss

@@ -0,0 +1,18 @@
+#center {
+    margin-left: 2vw;
+    margin-right: 2vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    text-align: center;
+}
+
+::placeholder {
+  color: #ffffff;
+  opacity: 1; /* Firefox */
+}
+  
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: #ffffff;
+}

src/scss/modules/_quote.scss

@@ -0,0 +1,22 @@
+.App-quote {
+  font-size: 0.8em;
+  text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}
+
+@media screen and (min-width: 600px) {
+  .App-quote {
+    margin-left: 30%;
+    margin-right: 30%;
+  }
+}
+
+.App-quote-author {
+  font-size: 0.9em;
+  letter-spacing: 0.5px;
+  margin: 0;
+  text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}
+
+i.material-icons, h1.App-quote-author  {
+  display: inline;
+}

src/scss/modules/_search.scss

@@ -0,0 +1,38 @@
+.search-bar {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+    display: block;
+    color: #ffff;
+    button {
+        cursor: pointer;
+        outline: none;
+        i.material-icons {
+            text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+        }
+        display: inline;
+    }
+    input[type=text] {
+        font-size: calc(5px + 1.2vmin);
+        background: none;
+        border: 2px solid #ffff;
+        padding: 10px;
+        color: #ffff;
+        position: absolute;
+        box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+        z-index: 1;
+    }  
+}
+
+.input.searchText {
+    border: none;
+}
+
+
+.searchbarform {
+    display: flex;
+    flex-direction: row;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
+}