html {font-size: 16px; }
@media (pointer: fine){ html{font-size: 16px; max-width: 800px;}}
@media (pointer: coarse){ html{ font-size: 4vmin; }}
@media (pointer: none){ html{ font-size: 3vmin; }}

body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  padding: 0; background-color: gray; width: 100%; margin: 0; padding: 1px; overflow-x: hidden;}
h1 {text-align: left; color: white; font-size: 1.2rem; margin: 2px;}
#header {width: 100%;}
#header th {width: 30vmin;}
#header td {vertical-align: top;}
#logo {width: 100%; height: auto;}

#average {width: 100%;}
#average td {display: block; font-size: 8vmin; font-weight: bold; color: brown; text-align: right;  padding: 2px}

.weather {position: relative; width: 100%; border-spacing: 2px; transition-duration: .5s}
.weather th {font-size: 1rem; background-color: #b0b0ff; }
.weather th:first-child {text-align: left; }
.weather td {background-color: #d0d0ff; font-size: 1rem;  text-align: right;  padding: 2px}
.weather img {width: 1.5rem; height: 1.5rem;}
#weatherHourly th {text-align: center;}
#weatherHourly tr:first-child th {font-size: .8rem;  hyphens: auto;}
#weatherHourly tr[day] td {background-color: #d0d0ff;}
#weatherHourly tr[night] td {background-color: #d0d0d0;}

#refreshBtn { display: block; width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s;}
#refreshBtn:hover { background-color: #2980b9;}

#install-button {display: none; width: 100%; padding: 12px; background-color: #2ecc71; color: white; border: none; border-radius: 5px; font-size: 1rem; margin: 10px 0;cursor: pointer; transition: background-color 0.3s;}
#install-button:hover {background-color: #27ae60;}