/* VARIABLES */
html[data-theme="light"] {
  --bg-dark: hsl(200 64% 89%);
  --bg: hsl(200 100% 94%);
  --bg-light: hsl(200 100% 99%);
  --text: hsl(205 100% 4%);
  --text-muted: hsl(198 51% 25%);
  --highlight: hsl(200 100% 98%);
  --border: hsl(199 27% 48%);
  --border-muted: hsl(199 34% 60%);
  --primary: hsl(194 100% 16%);
  --secondary: hsl(24 84% 24%);
  --danger: hsl(9 25% 41%);
  --warning: hsl(51 29% 33%);
  --success: hsl(148 24% 35%);
  --info: hsl(217 26% 42%);
}

html[data-theme="dark"] {
  --bg-dark: hsl(210 100% 2%);
  --bg: hsl(202 100% 4%);
  --bg-light: hsl(198 70% 8%);
  --text: hsl(200 100% 93%);
  --text-muted: hsl(199 43% 68%);
  --highlight: hsl(199 35% 37%);
  --border: hsl(198 51% 25%);
  --border-muted: hsl(196 100% 13%);
  --primary: hsl(198 70% 65%);
  --secondary: hsl(21 68% 68%);
  --danger: hsl(9 31% 65%);
  --warning: hsl(52 22% 56%);
  --success: hsl(147 21% 58%);
  --info: hsl(217 34% 65%);
}

:root {
  --bg-dark: hsl(200 64% 89%);
  --bg: hsl(200 100% 94%);
  --bg-light: hsl(200 100% 99%);
  --text: hsl(205 100% 4%);
  --text-muted: hsl(198 51% 25%);
  --highlight: hsl(200 100% 98%);
  --border: hsl(199 27% 48%);
  --border-muted: hsl(199 34% 60%);
  --primary: hsl(194 100% 16%);
  --secondary: hsl(24 84% 24%);
  --danger: hsl(9 25% 41%);
  --warning: hsl(51 29% 33%);
  --success: hsl(148 24% 35%);
  --info: hsl(217 26% 42%);
}

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

.no-wrap {
  white-space: nowrap;
}

/* BODY STYLES */

body {
  background-color: var(--bg-light);
  color: var(--text);
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 2.5rem;
  color: var(--primary);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-section {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-input {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 10px;
  //flex: 1;
  width: 400px;
}

.search-button {
  padding: 8.5px 15px;
  background-color: var(--primary);
  color: var(--highlight);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
  margin-left: -14px;
  font-weight: bold;
  font-size: 1rem;
  color: var(--bg-light);
}

.search-button:hover {
  background-color: var(--secondary);
}

.weather-display {
  background-color: var(--bg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-muted);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 400px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.weather-details {
  border-radius: 8px;
  margin-bottom: 20px;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
}

.stat-seperator {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  height: 125px;
  width: 125px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: var(--bg);
  margin: 10px 0;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}

.stat-seperator:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-muted);
}

.stat-seperator span {
  display: block;
  margin: 5px 0;
}

.forecast-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.forecast-cards {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.forecast-card {
  background-color: var(--bg);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 20px;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.forecast-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: none;
  background-color: var(--bg-dark);
}

.forecast-card h4 {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.forecast-card p {
  font-size: 0.9rem;
}

/* FOOTER STYLES */

.footer {
  text-align: center;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* MEDIA QUERIES */
@media (max-width: 600px) {
  .city-input {
    width: 250px;
  }
}

@media (min-width: 1201px) {
  .weather-display {
    width: 600px;
    height: 350px;
  }

  .weather-display {
    width: 500px;
    height: 300px;
  }

  .weather-details {
    width: 500px;
    height: auto;
  }

  .stat-seperator {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 500px) {
  .weather-display,
  .weather-details {
    width: 100%;
    height: auto;
    flex-direction: column;
  }

  .stat-seperator {
    width: 100%;
    height: auto;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-dark: hsl(210 100% 2%);
    --bg: hsl(202 100% 4%);
    --bg-light: hsl(198 70% 8%);
    --text: hsl(200 100% 93%);
    --text-muted: hsl(199 43% 68%);
    --highlight: hsl(199 35% 37%);
    --border: hsl(198 51% 25%);
    --border-muted: hsl(196 100% 13%);
    --primary: hsl(198 70% 65%);
    --secondary: hsl(21 68% 68%);
    --danger: hsl(9 31% 65%);
    --warning: hsl(52 22% 56%);
    --success: hsl(147 21% 58%);
    --info: hsl(217 34% 65%);
  }

  .weather-display {
    background-color: var(--bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-muted);
    transition: all 0.3s ease-in-out;
  }

  .weather-display:hover {
    border: none;
    background: linear-gradient(
      to top,
      var(--bg-dark),
      var(--bg),
      var(--bg),
      rgba(255, 255, 255, 0.1) 100%
    );
  }
}