:root {
            --brand-red: #D32F2F;
            --brand-dark-red: #8B0000;
            --alert-yellow: #FFA000;
            --bg-color: #F4F1EA; 
            --sidebar-width: 250px;
            --footer-gray: #B0B0B0;
            --footer-dark: #575757;
        }

       
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
        
body {
    background: #f4f6f8;
    color: #111827;
}
.hero {
            background: linear-gradient(135deg, #8B4444, #7a2828);
            margin: 20px 40px;
            border-radius: 12px;
            padding: 60px 40px;
            text-align: center;
            color: white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .card {
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 15px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .card-flood {
            background-color: var(--alert-yellow);
            color: #222;
        }

        .card-typhoon {
            background-color: #FF0000;
            color: white;
        }

        .card h4 {
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .card p {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .timestamp {
            font-size: 0.8rem;
            margin-top: 10px;
            display: block;
            opacity: 0.8;
        }