/* makes sizing simpler */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* dark mode user-agent-styles */
/* improves punctuation in supported browsers */
html {
  hanging-punctuation: first last;
}

/* min body height */
body {
  min-height: 100svh;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

:root {
  --arrow-bg: rgb(37, 177, 255);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
  --option-bg: white;
  --select-bg: rgba(255, 255, 255, 0.2);
}

.main-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 100px;
  min-height: 100svh;
  font-size: 1.5rem;
  color: #FFF;
  isolation: isolate;
}

.weather-bg {
  position: relative;
  background: no-repeat center/cover;
  background-image: url("/img/snow.jpg");
}

.weather-anim {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  z-index: -1;
  max-height: 100svh;
  overflow: hidden;
}
.weather-anim--hidden {
  display: none;
}
.weather-anim__content {
  animation: anim 20s linear infinite;
}
.weather-anim__content > img {
  max-width: unset;
  width: 1400px;
}
@keyframes anim {
  100% {
    transform: translateY(50%);
  }
}

.city-selector {
  max-width: 30rem;
  width: 100%;
  position: relative;
  z-index: 100;
}
.city-selector__select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 100%;
  padding: 1rem 5rem 1rem 1rem;
  background: var(--arrow-icon) no-repeat right 0.8em center/1.4em, linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /* Remove IE arrow */
  /* Remove focus outline */
}
.city-selector__select::-ms-expand {
  display: none;
}
.city-selector__select:focus {
  outline: none;
}
.city-selector__select-option {
  color: inherit;
  background-color: var(--option-bg);
}

.weather {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 25px;
  justify-content: space-between;
  border-radius: 20px;
  background: rgb(29, 30, 34);
  background: radial-gradient(circle, rgb(37, 177, 255) 0%, rgb(3, 111, 166) 100%);
}
.weather__name {
  margin-inline-start: 20px;
}
.weather__name:after {
  content: "";
  display: inline-block;
  height: 26px;
  width: 20px;
  margin-inline-start: 5px;
  background: no-repeat bottom/contain url("/img/icons/location.svg");
}
.weather__temperature {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 3rem;
}
.weather__temperature:before {
  content: "";
  display: inline-block;
  height: 62px;
  width: 20px;
  margin-inline-end: 5px;
  background: no-repeat bottom/contain url("/img/icons/temperature.svg");
}
.weather__description {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
}
.weather__description-column {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex: 1 1;
}
.weather__description-title {
  text-transform: uppercase;
}
.weather__description-text {
  white-space: nowrap;
}

/*# sourceMappingURL=style.css.map */