body {
  background-color: tomato;
  margin: 5px;
}

.weather-card {
  margin: auto;
  margin-top: 50px;
  padding: 20px;
  background-color: #add8e6;
  border: 3px solid #000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: 250px;
}

.day-night {
  display: block;
  border: 2px solid black;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  margin: auto;
}

.weather-icon {
  display: block;
  margin: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border: 2px solid black;
  margin-top: 15px; /* Add this line to add a gap of 3 pixels */
  border-radius: 10px;
}

.city,
.temperature,
.country {
  text-align: center;
}

.city-input {
  margin-bottom: 20px;
  padding: 10px;
  width: 91%;
  text-align: center;
  background-color: #add8e6; /* Match the background color of .weather-card */
  border: 1px solid #000; /* Match the border style and thickness of .weather-card */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Match the box shadow of .weather-card */
  border-radius: 10px; /* Match the border radius of .weather-card */
}

.title {
  margin-top: 50px;
  text-align: center;
}