add blurry background to about container and add desktop media query

Author: Daniel1000c

weatherApp/css/style.css

@@ -181,15 +181,18 @@ html {
 /*Format about text*/
 .aboutContent {
     text-align: center;
-    background-color: #304c89;
+    background-color: rgba(255, 255, 255, 0.3);
     padding: 5%;
     border-radius: 12px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 .aboutContent h2 {
     font-family: monospace;
     font-size: 2em;
-    color: white;
+    font-weight: bold;
+    color: black;
     text-align: left;
 }
 
@@ -205,7 +208,7 @@ html {
     text-align: left;
     line-height: 2;
     letter-spacing: 2px;
-    color: white;
+    color: black;
     font-size: 0.9em;
 }
 
@@ -269,3 +272,60 @@ footer p {
 }
 
 /********************End of Footer Formatting********************/
+
+/********************Media Query Formatting********************/
+@media screen and (min-width: 1300px) {
+
+    /*Format weather container*/
+    
+    /*Format weather box width*/
+    .weatherContent {
+        width: 50%;
+    }
+
+    /*Format weather box title*/
+    .weatherBox h2 {
+        font-size: 6em;
+    }
+
+    /*Format weather box input*/
+    .weatherBox input {
+        font-size: 2.5em;
+    }
+
+    /*Format weather box button*/
+    .weatherBox button {
+        font-size: 2.5em;
+        width: 100px;
+        text-align: center;
+    }
+    /*About container formatting*/
+
+    /*Format width of about content container*/
+    .aboutContent {
+        width: 50%;
+    }
+
+    /*Format about content title*/
+    .aboutContent h2 {
+        font-size: 3em;
+    }
+
+    /*Format about content img*/
+    .aboutContent img {
+        width: 30%;
+    }
+
+    /*Format about content p*/
+    .aboutContent p {
+        font-size: 1.6em;
+    }
+
+    /*Format footer*/
+
+    /*Format footer p tag*/
+    footer p {
+        font-size: 1.5em;
+    }
+
+}