added some css for funsies

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -61,21 +61,21 @@ function App() {
   return (
     <>
       <div className="container">
-        <h1>WEATHER APPLICATION</h1>
         <div className="search-sec">
+        <h1>WEATHER APPLICATION</h1>
           <input
             type="text"
             value={search}
-            placeholder="Search by City..."
+            placeholder="Search by city..."
             onChange={handleSearch}
           />
-        </div>
         <div>
-          <p>or</p>
+          or
         </div>
         <div>
           <button onClick={geoHandler}>Find me!</button>
         </div>
+        </div>
         <br />
         <br />
         {isLoading && <LoadingIndicator />}

src/app.css

@@ -1,52 +1,80 @@
+#root {
+  font: 0.9rem sans-serif;
+  height: 100%;
+  margin: 0;
+}
+
 *,
 ::after,
 ::before {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-h1 {
-  text-align: center;
-  margin-top: 3rem;
+
+
+.search-sec {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  background: rgba(250, 250, 250, 0.85);
+  gap: 1rem;
+  padding: 25px;
+  border-radius: 20px;
+  margin-top: 20px;
+
 }
+
 .container {
   height: 100vh;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2rem;
+  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.418)),
+    url("https://images.unsplash.com/photo-1505533542167-8c89838bb19e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
+  background-size: cover;
+  background-position: center;
 }
+
 input {
   outline: none;
-  border: 1px solid black;
+  border: none;
+  border-radius: 10px;
   width: 300px;
-  height: 30px;
+  height: 40px;
   padding: 4px;
-  color: #000;
+  background: rgba(250, 250, 250, 0.85);
 }
 
 img {
-  height: 100px;
+  height: 75px;
 }
+
 .credit {
   position: fixed;
   top: 10px;
   right: 10px;
   font-size: 1.5rem;
+  padding: 10px;
+  border-radius: 5px;
+  background: rgba(250, 250, 250, 0.85);
 }
+
 p {
-  font-size: 2rem;
+  font-size: 1.5rem;
+  border-radius: 10px;
+  padding: 10px;
+  background: rgba(250, 250, 250, 0.85);
 }
 
 button {
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid #8a2b06;
+  border: none;
   padding: 0.5rem 2rem;
-  border-radius: 25px;
+  border-radius: 10px;
   margin-left: 1rem;
-  font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
+  background: rgba(250, 250, 250, 0.85);
 }

src/components/Weather.css

@@ -1,10 +1,16 @@
 .output-sec {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.8rem;
-  font-size: 1.5rem;
+  justify-content: center;
+  flex-direction: column;
+  padding: 40px 8%;
+  border-radius: 20px;
+  background: rgba(250, 250, 250, 0.85);
+  box-shadow: 10px 10px 5px 0px rgba(15, 15, 15, 0.404);
+  letter-spacing: .03rem;
 }
+
 .output-sec .location {
+  font-weight: bold;
   text-transform: uppercase;
 }