h1 {
    text-align: center;    
    background-color: slategrey;
    color: white;
    font-family: 'Times New Roman', Times, serif;
}

h5 {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
}

#weather-input {
    float: left;
}


.col-4 {
    margin: 30px;

}

.col-8 {
    margin: 30px;
}

.card {

    display: inline-block;
    width: 60%;
    overflow: auto;

}

.card2 {
    margin: 10px;
    padding: 0px;
    display: inline-block;
    min-width: 200px;
    height: 250px;
    background-color: rgb(90, 205, 176);
}

.card3 {

    text-align: center;
    justify-content: center;
    width: 30%;
}

.card-container {
    width: 100%;
    margin: auto 0;
    display: flex;
    text-align: center;
  }

.card-body {
      text-align: center;
      padding: 5px;
      line-height: 1.5;
      width: 100%;
      overflow: auto;
  }

.background-color-red {
    background-color: red;
}

.background-color-green {
    background-color:green;
}

.background-color-orange {
    background-color: orange;
}

.background-color-yellow {
    background-color: yellow;
}

#current-weather {
    justify-content: center;
}

#forecast {
    overflow: auto;
}

.city-button {
    width: 100%;
}