/* use em, vw, vh for better scaling */

#weather-widget {
    position: relative;
    margin-top: 10px;
    text-align: center;
}

.weather-error {
    font-family: mono-space, Arial, sans-serif;
    color: coral;
}

.weather-header {
    font-family: jura, Arial, sans-serif;
    font-size: 1em;
    color: green;
    font-weight: 900;
}

.weather-table {
    margin: 0 auto;
    width: 70vw;
    max-width: 71vw;
    border-radius: 20px;
    padding: 1vh 1vw 0 1vw;
    background-color: aliceblue;
    font-family: sans-serif;
    font-size: 0.8em;
}

.weather-table td {
    height: 1.2vh;
    overflow: hidden;
}

.weekday {
    font-size: 0.9em;
    color: DarkSlateGray;
    font-weight: 700;
}
.icon {
    margin-top: -1.5vh;
    width: 8vw;
    height: 4vw;
    transform: scale(0.4, 0.4);
}
.summary {
    color: gray;
}
.ctemp, .hitemp, .lotemp {
    font-weight: 400;
}
.hitemp {
    color: red;
}
.lotemp {
    color: dodgerblue;
}
.last {
    font-family: mono-space, Arial, sans-serif;
    text-align: left;
    font-size: 0.7em;
    font-style: italic;
    color: darkgray;
}

.lightning,
.sun {
    fill: #f98629;
}
.moon {
    fill: #585858;
}
.cloud,
.fog {
    fill: #585858;
}
.rain {
    fill: #1279c2;
}
.hail,
.snow {
    fill: #1279c2;
}
.wind {
    fill: #585858;
}