@media only screen and (min-width: 37.5em) {
    /* Only CSS rules that need to be changed to meet the layout needs from small to medium go in here */

    header, nav, main, footer {
        max-width: 800px;
        
    }
    nav button { display:none; }  /* hamburger button does not need to be shown */

    nav ul li {
        display: inline-block;
        
    }
   
    main {
        clear: both;
    }
    
    main section h4 {
        text-align: center
    }
    

   section.forecast {
        display: block;
        clear: both;
        padding: 30px 0 0 0;  
    }
    
    
    section.forecast table {
        border: 1px solid black;
        border-collapse: collapse;
        margin: 7%;
        width: 85%;
        text-align: center;
    }
    
    
    section.forecast table th, td {
        border: 1px solid #7F3300;
        
    }
   

    article p.town-article img {
        width: 200px; 
        float: left;
        padding: 10px 10px 1px 1px;
    } 

}