body {

font-family:
"Segoe UI",
"Yu Gothic",
sans-serif;

margin:0;

background:#f3f5f7;

color:#333;

}


header {

background:#1e88e5;

color:white;

text-align:center;

padding:20px;

}


header h1 {

margin:0;

font-size:24px;

}


main {

padding:15px;

}


#update {

text-align:right;

font-size:13px;

color:#666;

margin-bottom:10px;

}


.area {

background:white;

border-radius:12px;

padding:15px;

margin-bottom:12px;

box-shadow:0 2px 5px #ccc;

}


.area-name {

font-size:20px;

font-weight:bold;

}


.status {

margin-top:8px;

font-size:18px;

font-weight:bold;

}


.green {

color:#2e7d32;

}


.yellow {

color:#f9a825;

}


.red {

color:#c62828;

}


.stop {

color:#6a1b9a;

}


footer {

text-align:center;

font-size:12px;

color:#777;

padding:20px;

}