body {

  font-family: Arial, sans-serif;

  margin: 20px;

}

h1 {

  text-align: center;

}

#location-input {

  text-align: center;

  margin-bottom: 20px;

}

#location {

  padding: 5px;

  margin-right: 10px;

}

#weather-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.weather-card {

  width: 100%;

  max-width: 300px;

  padding: 10px;

  margin: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

}

.weather-card p {

  margin: 5px 0;

}

.weather-card .temperature {

  font-size: 20px;

}

.weather-card .description {

  text-align: center;

}

.weather-card .weather-icon {

  font-size: 48px;

  margin-bottom: 5px;

  text-align: center;

}

.weather-card .extra-info {

  font-size: 14px;

  text-align: center;

}