body {

    margin:0;

    font-family:sans-serif;

    background:#f2f2f2;

    text-align:center;

    color:#333;

}



header {

    background:#1976d2;

    color:white;

    padding:30px;

}



header h1 {

    margin:0;

}



main {

    padding:30px;

}



#update {

    text-align:center;

    font-size:13px;

    color:#777;

    margin-bottom:20px;

}




.area {


    display:block;

    background:white;

    margin:20px auto;

    padding:20px;

    max-width:350px;

    border-radius:10px;

    box-shadow:0 3px 8px #ccc;


}



.area-name {


    font-size:20px;

    font-weight:bold;


}




.status {


    margin-top:10px;

    font-size:18px;

    font-weight:bold;


}



.green {

    color:#2e7d32;

}



.yellow {

    color:#f9a825;

}



.red {

    color:#c62828;

}



.stop {

    color:#6a1b9a;

}



footer {


    margin-top:50px;

    color:#777;


}

.category{

font-size:14px;

color:#555;

margin-top:5px;

}



.notice{

margin-top:12px;

padding-top:10px;

border-top:1px solid #ddd;

font-size:14px;

}

.category{

font-size:14px;

font-weight:normal;

color:#555;

}



.notice{

margin-top:12px;

padding-top:10px;

border-top:1px solid #ddd;

font-size:14px;

}