First git commit

style.css

@@ -0,0 +1,97 @@
+:root {
+  --Rain: url("https://cdnb.artstation.com/p/assets/images/images/044/191/175/original/ryan-haight-kerry-park-rainy.gif?1639344501");
+  --Clouds: url("https://64.media.tumblr.com/9ee59e8b2b137130d55209f48398878a/tumblr_pac4orsuyr1tlgv32o1_540.gif");
+  --Drizzle: url("https://c.tenor.com/O5-9NwLytp4AAAAd/minimoss-pixel-art.gif");
+  --Clear: url("https://thumbs.gfycat.com/UnfoldedRedJaguarundi-max-1mb.gif");
+  --Snow: url("https://thumbs.gfycat.com/DecimalBabyishAmericancreamdraft-max-1mb.gif");
+  --Thunderstorm: url("../images/thunderstorm.gif");
+  --default: url("https://wallpaperaccess.com/full/3517019.gif");
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  font-family: 'Open Sans', sans-serif;
+  background: #222;
+  background-image: var(--default);
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-size: 120%;
+}
+
+.card {
+  background: #000000d0;
+  color: white;
+  padding: 2em;
+  border-radius: 30px;
+  width: 100%;
+  max-width: 420px;
+  margin: 1em;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  margin: 0.5em;
+  border-radius: 50%;
+  border: none;
+  height: 44px;
+  width: 44px;
+  outline: none;
+  background: #7c7c7c2b;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+
+input.search-bar {
+  border: none;
+  outline: none;
+  padding: 0.4em 1em;
+  border-radius: 24px;
+  background: #7c7c7c2b;
+  color: white;
+  font-family: inherit;
+  font-size: 105%;
+  width: calc(100% - 100px);
+}
+
+button:hover {
+  background: #7c7c7c6b;
+}
+
+h1.temp {
+  margin: 0;
+  margin-bottom: 0.4em;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.description {
+  text-transform: capitalize;
+  margin-left: 8px;
+}
+
+.weather.loading {
+  visibility: hidden;
+  max-height: 20px;
+  position: relative;
+}
+
+.weather.loading:after {
+  visibility: visible;
+  content: "Input Location";
+  color: white;
+  position: absolute;
+  top: 0;
+  left: 20px;
+}