purp.css

body {
    background-color: aliceblue;
    color: black;
    font-family: Consolas;
}

.error {
    background-color: red;
    color: white;
    font-size: 20pt;
}

.main-table {
    width: 100%;
    border-collapse: collapse;
    border: 4px solid black;
}

.main-table tr {
    border: 2px solid black;
}

.main-table td,th {
    border: 1px solid black;
    padding: 3px;
    text-align: center;
}

.info-details table, .info-details tr {
    border: 0px solid black;
    height: 100%;
}
.info-details td {
    border: 1px solid black;
    height: 100%;
    text-align: center;
    white-space: nowrap;
}

table.aqi-details {
    width: 100%;
    height: 100%;
}

td.info-aqi , td.info-temp{
}

.info-sensor-title {
    font-size: 20px;
    font-weight: bold;
}
.info-sensor-details {
    font-size: 16px;
}

.info-big {
    font-weight: bold;
}
.info-big-value {
    font-size: 40px;
}
.info-big-pm {
    font-size: 20px;
}

td.status {
    vertical-align: top;
    text-align: left;
}

.raw-data {
    font-size: 10pt;
}

.stat-label {
    font-size: 12px;
}
.stat-aqi {
    font-size: 16px;
    font-weight: bold;
}
.stat-pm {
    font-size: 10px;
}
.stat-map {
    padding: 5px;
}

td.temp {
    font-size: 20px;
    font-weight: bold;
}

#log {
    height: 200px;
    max-height: 200px;
    font-size: 10pt;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #282828;
    color: #41ff00;
    border-top: 2px solid black;
    opacity: 1;
    overflow: scroll;
}

#log-btn {
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: red;
    color: white;
    font-weight: bold;
}

.hc-zoom-btn {
    margin: 2pt;
    padding: 3pt;
}

.app-title {
    font-size: 12pt;
}