makes background image responsive

.eslintcache

@@ -1 +1 @@
-[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":8703,"mtime":1606978472122,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2052,"mtime":1606891289002,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":8703,"mtime":1606988957224,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2052,"mtime":1606891289002,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]

src/index.css

@@ -11,41 +11,51 @@ body {
 
 .app {
 	background-image: url('./assests/title.jpg');
-	background-size: cover;
+	background-size: fill;
 	background-position: bottom;
+	background-repeat: no-repeat;
 	transition: 0.4s ease-out;
+	background-color: #530c87;
 }
 
 .app.cool-clear {
 	background-image: url('./assests/cool-clear.jpg');
+	background-color: #2458af;
 }
 
 .app.warm-clear {
 	background-image: url('./assests/warm-clear.jpg');
+	background-color: #8f63aa;
 }
 
 .app.hot-clear {
 	background-image: url('./assests/hot-clear.jpg');
+	background-color: #895641;
 }
 
 .app.clouds {
 	background-image: url('./assests/cloudy.jpg');
+	background-color: #0c324a;
 }
 
 .app.rain {
 	background-image: url('./assests/rainy.jpg');
+	background-color: #451b61;
 }
 
 .app.storm {
 	background-image: url('./assests/storm.jpg');
+	background-color: #034082;
 }
 
 .app.snow {
 	background-image: url('./assests/snowing.jpg');
+	background-color: #2caecb;
 }
 
 .app.mist {
 	background-image: url('./assests/mist.jpg');
+	background-color: #095258;
 }
 
 main {
@@ -62,7 +72,7 @@ main {
 	position: relative;
 
 	width: 100%;
-	margin: 0 0 75px;
+	margin: 0 auto 75px;
 
 	background-color: rgba(255, 255, 255, 0.5);
 	border-radius: 0px 0px 16px 16px;