/* Weather App */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  color: oklch(93.2% 0.032 255.585);
  font-family: Arial, Helvetica, sans-serif;
  background: #3949ab;
  background: linear-gradient(45deg, oklch(54.6% 0.245 262.881), oklch(28.2% 0.091 267.935));
}

h1 {
  margin: 26px 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 750px;
  margin: auto;
  padding: 16px;
  border: 1px solid oklch(70.7% 0.165 254.624);
}

.display-section {
  position: relative;
  min-height: 260px;
}

.display-title {
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  transform: translate(-50%, -50%);
  color: oklch(72.3% 0.219 149.579);
}

.top-display-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 25px;
}

#weather-icon {
  width: 120px;
  height: auto;
}

#weather-main {
  font-size: 1.2em;
  font-weight: bold;
  color: oklch(72.3% 0.219 149.579);
}

#main-temperature {
  font-size: 2.5em;
  font-weight: bold;
  color: oklch(82.8% 0.189 84.429);
}

#location {
  text-align: right;
  font-weight: bold;
  font-size: 1.2em;
}

.value-right {
  float: right;
  color: whitesmoke;
}


.display-section,
.controls-section {
  width: 100%;
  max-width: 560px;
  padding: 20px;
  margin-bottom: 26px;
  border-radius: 6px;
  border: 1px solid oklch(70.7% 0.165 254.624);
  box-shadow: 1px 1px 6px oklch(93.2% 0.032 255.585);
}

.divider {
  margin: 26px 0;
  border-bottom: 1px solid oklch(93.2% 0.032 255.585);
}

.controls-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.label-location {
  display: none;
}

.location-section {
  position: relative;
  width: 70%;
}

.select-location {
  width: 100%;
  cursor: pointer;
  appearance: none;

  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid oklch(93.2% 0.032 255.585);

  font-size: 1em;
  font-weight: bold;
  color: oklch(28.2% 0.091 267.935);
}

.location-section::after {
  content: '▼';
  font-size: 0.8em;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: oklch(28.2% 0.091 267.935);
}

.button {
  cursor: pointer;

  width: 30%;
  min-width: 120px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid oklch(93.2% 0.032 255.585);


  font-size: 1em;
  font-weight: bold;
  color: oklch(28.2% 0.091 267.935);
}

.button:hover {
  color: oklch(93.2% 0.032 255.585);
  border: 1px solid oklch(93.2% 0.032 255.585);
  background-color: oklch(70.7% 0.165 254.624);
}

.button:focus {
  outline-color: oklch(72.3% 0.219 149.579);
}

.button:active {
  background: oklch(72.3% 0.219 149.579);
}

.button,
.select-location {
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.button,
.select-location,
.location-section::after {
  user-select: none;
}