.container{
    /*background: whitesmoke;*/
   padding: 3% 0;
}
.container a{
    color: #4d94ff;
    font-style: italic;
    font-weight: 600;
}
.container a:hover{
    text-decoration: none;
}
.container a:visited{
    color:#e60000;  
}
.container h1 {
    /*color:#e60000;*/
    padding-bottom: 7px;
    text-align: center; 
}
.container h1 span{
    color:#000;
}
.container-forms #city{
    width: 50%;
    padding: 0.5% 0 0.5% 0.5%;
}
.container-forms button{
    margin-left:  2%;
    padding: 0 7% 0 7%;
}
.container-forms {
   display: flex;
   justify-content: center;
}
#showWeatherForcastDB{
    padding: 2%;
}
#showWeatherForcastDB span{
    font-weight: 600;
}
#showWeatherForcastAPI{
    padding: 2%;
}
#showWeatherForcastAPI h3{
    font-weight: 600;
}
#showWeatherForcastAPI .title{
    font-weight: 600;
    font-size: 120%;
    display: block;
    padding-bottom: 3px;
}

/* mobile */
@media only screen and (max-width: 600px) {
    .container-forms {
     display: flex;
     flex-direction: column;
     padding:3%;
  
    }
    .container-forms #city{
        width: 100%;
        text-align: center;
        margin-bottom:2% ;
        padding: 7px;
        
    }
    .container-forms button{
        margin-left:  0%;
        padding: 9px 7% 9px 7%;
        margin-bottom:2% ;
    }

  }