body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  color: var(--ctp-mocha-text);
  font-size: 32px;
  background-color: var(--ctp-mocha-base);
}

input {
  border: 2px solid var(--ctp-mocha-surface0);
  background-color: var(--ctp-mocha-base);
  border-radius: 5px;
  text-align: center;
  color: var(--ctp-mocha-text);
  font-weight: bold;
  font-size: 50%;
  cursor: default;
}

.weather_description {
  color: var(--ctp-mocha-text);
  margin-top: 2rem;
  cursor: pointer;
  font-size: 30px;
  transition: text-shadow 0.5s ease;
}

.weather_description:hover {
  text-shadow: 0 0 20px var(--ctp-mocha-teal);
  transition: text-shadow 0.2s ease;
}

#city {
  font-size: 75px;
  cursor: default;
  transition: text-shadow 0.4s ease;
}

#city:hover {
  text-shadow: 0 0 20px var(--ctp-mocha-teal);
  transition: text-shadow 0.5s ease;
}

#error {
  color: var(--ctp-mocha-red);
  font-size: 40px;
  margin-top: 50px;
  font-weight: bold;
}