table.weather-table { min-width: 650px; border-collapse: collapse; margin: 0 auto; }
table.weather-table thead tr th { text-align: middle; font-weight: bold; border: 1px solid black; color: white; background-color: black; }
table.weather-table tbody tr.month-label td { font-weight: bold; text-align: center; border: 1px solid black; }
table.weather-table tbody tr td { text-align: center; vertical-align: middle; border: 1px solid gray; }

span.weather { width: 90px; height: 90px;  display: table-cell; font-size: 2em; font-weight: bold; text-align: center; vertical-align: middle; background-repeat: no-repeat; background-position: center center; background-size: 85px 85px; margin: 0 auto; }
span.weather.Fair { background-image: url(sun.png); }
span.weather.Snowy { background-image: url(snowing.png); }
span.weather.Cloudy { background-image: url(cloudy.png); }
span.weather.Shower { background-image: url(rain.png); }

table.weather-table tbody tr td.day { text-align: center; vertical-align: middle; padding: 0 auto; transition: 0.5s linear; cursor: pointer; }
table.weather-table tbody tr td.day.winter { background-color: azure; }
table.weather-table tbody tr td.day.spring { background-color: greenyellow; }
table.weather-table tbody tr td.day.summer { background-color: khaki; }
table.weather-table tbody tr td.day.autumn { background-color: lightcoral; }
table.weather-table tbody tr td.day.crops-harvest-day { background-color: blueviolet; }
table.weather-table tbody tr td.day.start-day { background-color: magenta; }
table.weather-table tbody tr td.day.crops-dead-day { background-color: black; }

table.weather-table tbody tr td.day:hover { background-color: blue; transition: 0.5s linear; }

p.info { text-align: center; }