button {
  position: relative;
  top: -4.8vmin;
  left: 34vmin;
  padding: 0 0 0 0.5vmin;
  font-size: 3em;
  background: none;
  border: none;
}
button:hover {
  color: #7fb5ff;
}

hr {
  margin: 0;
}

span {
  padding: 0 0 0 0.5vmin;
}

/* Clear Theme */
.text-color-clear {
  color: #001d6e;
}
.degree-color-clear-hover:hover {
  color: #001d6e;
}
.current-location-row-clear {
  color: #e4e4e4;
  background: #001d6e;
}
.background-color-clear {
  background: linear-gradient(to bottom, rgb(30 109 217), rgb(219 233 255));
}
.border-color-clear {
  border: 1px #001d6e solid;
}

/* Mostly Cloudy Theme */
.text-color-mostly-cloudy {
  color: #323643;
}
.degree-color-mostly-cloudy-hover:hover {
  color: #323643;
}
.current-location-row-mostly-cloudy {
  color: #93deff;
  background: #323643;
}
.background-color-mostly-cloudy {
  background: linear-gradient(180deg, #c9cbcc 0%, #bbdceb 67.19%, #a8d6ea 100%);
}
.border-color-mostly-cloudy {
  border: 1px #323643 solid;
}

/* Cloudy Theme */
.text-color-cloudy {
  color: #323643;
}
.degree-color-cloudy-hover:hover {
  color: #323643;
}
.current-location-row-cloudy {
  color: #e4e4e4;
  background: #323643;
}
.background-color-cloudy {
  background: linear-gradient(180deg, #606470 0%, #f7f7f7 100%);
}
.border-color-cloudy {
  border: 1px #323643 solid;
}

/* Night Theme */
.text-color-night {
  color: #eeeeee;
}
.degree-color-night-hover:hover {
  color: #eeeeee;
}
.current-location-row-night {
  color: #0f044c;
  background: #afb0b7;
}
.background-color-night {
  background: linear-gradient(180deg, #141e61 0%, #787a91 100%);
}
.border-color-night {
  border: 1px #eeeeee solid;
}

.main-background {
  width: 88vmin;
  height: 68vmin;
  margin: 1vmin auto;
  font-size: 0.95vmin;
  font-family: "Source Sans Pro", Tahoma;
  box-shadow: inset 3px 3px 5px 0 rgb(255 255 255 / 25%),
    inset -3px -3px 5px 0 rgb(1 30 111 / 13%), 0 0 8px 1px rgb(1 30 111 / 25%);
  border-radius: 15px;
}
.open-source-code-link {
  width: 88vmin;
  margin: 1vmin auto;
  font-size: 1.7vmin;
  font-family: "Source Sans Pro", Tahoma;
}

.line {
  display: flex;
}

/* Location Row */
.current-location-row {
  height: 9vmin;
  font-size: 3.7em;
  border-radius: 15px 15px 0 0;
}

.current-location-icon {
  padding: 3.2vmin 0 0 4vmin;
}
.current-location-text {
  padding: 0 0 1vmin 1vmin;
  align-self: end;
  line-height: 3.5vmin;
}
.time {
  padding: 0 0 0.2vmin 2.5vmin;
  align-self: end;
}

/* Current Weather Row */
.current-weather-row {
  height: 25vmin;
  margin: 3vmin 2vmin 2vmin 2vmin;
  font-size: 3.4em;
}

.current-weather-col {
  margin: 1vmin;
  font-weight: 600;
}
.description {
  margin-left: 2vmin;
  text-transform: capitalize;
}

.tempeture {
  max-width: fit-content;
  font-size: 6em;
  line-height: 1em;
}
.degree {
  max-width: fit-content;
  margin-top: 2vmin;
  font-size: 1.7em;
}

.not-select-degree {
  color: #7f7e7e;
  text-decoration: none;
}
.not-select-degree:hover {
  cursor: pointer;
}

.select-degree {
  text-decoration: none;
}

.current-weather-details-top {
  padding-left: 2vmin;
}
.current-weather-details-bottom {
  padding: 3.5vmin 0 0 2vmin;
}

.current-weather-img {
  display: block;
  position: relative;
  top: -0.8vmin;
  max-height: 25vmin;
  margin: 0 auto;
}

/* Dayly Forecast Row */
.dayly-forecast-row {
  height: 18vmin;
  margin: 0 1vmin;
  font-size: 3.5em;
}

.week-day {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
}
.week-temperature {
  display: block;
  font-weight: 900;
  text-align: center;
}
.week-weather-img {
  height: 8vmin;
  margin: 0 auto;
}

/* Search Row */
.search-row {
  margin: 1vmin auto;
}

.city-example-col {
  padding-top: 1.8vmin;
  font-size: 2.8em;
  text-align: center;
}
.city-example {
  padding: 0 1.8vmin;
}
.city-example:hover {
  font-weight: 600;
  cursor: pointer;
}

.search-input {
  width: 39vmin;
  height: 5.5vmin;
  margin-top: 1vmin;
  padding: 0 6vmin 0 3vmin;
  font-size: 2.6em;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3vmin;
}

/* Free to use animated SVG weather icons. Handcrafted by [Bas Milius](https://bas.dev). */