/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffeaca;
    color: #333;
    font-size: 16px; /* Slightly larger base font size */
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center everything horizontally */
    justify-content: flex-start; /* Align content to the top */
    min-height: 100vh; /* Ensure the page takes at least the full viewport height */
}

/* Header Table Styling */
.header-table {
    width: 100%; /* Full width */
    background-color: #ffeaca;
    border-collapse: collapse;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center header content */
    align-items: center;
    padding: 8px;
}

.header-table td {
    padding: 5px;
    text-align: center;
}

.header-table .logo {
    flex: 1;
    text-align: center; /* Center logo */
}

.header-table .logo img {
    width: 150px; /* Larger logo */
    height: 150px; /* Larger logo */
}

.header-table .title {
    flex: 2;
    text-align: center;
    font-size: 18px; /* Smaller title font size */
    font-weight: bold;
    color: #444;
}

.header-table .stats {
    flex: 1;
    text-align: center; /* Center stats */
    font-size: 14px; /* Larger stats font size */
    color: #666;
}

.header-table .stats p {
    margin: 2px 0; /* Tighter spacing */
}

/* Centered Title */
.centered-title {
    text-align: center;
    margin: 10px 0;
    font-size: 20px; /* Larger title font size */
    font-weight: bold;
    color: #444;
}

/* Sensor Table Styling */
.sensor-table {
    width: auto; /* Auto-sized width */
    border-collapse: collapse;
    margin: 20px auto; /* Center the table horizontally */
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded corners are visible */
}

.sensor-table th, .sensor-table td {
    padding: 12px; /* Larger padding */
    border: 1px solid #ddd;
    text-align: center; /* Center table content */
    font-size: 14px; /* Larger table font size */
}

.sensor-table th {
    background-color: #f8f8f8; /* Light gray header background */
    font-weight: bold;
    color: #444;
    font-size: 16px; /* Larger header font size */
}

.sensor-table tbody tr:hover {
    background-color: #f5f5f5; /* Hover effect */
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 10px;
    background-color: #ffeaca;
    margin-top: 20px;
    font-size: 14px; /* Larger footer font size */
    color: #666;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 100%; /* Full width footer */
}

/* Mobile-Friendly Design */
@media (max-width: 768px) {
    .header-table {
        flex-direction: column; /* Stack header elements vertically on mobile */
        align-items: center;
        padding: 10px;
    }

    .header-table .logo {
        text-align: center;
        margin-bottom: 10px;
    }

    .header-table .logo img {
        width: 120px; /* Slightly smaller logo for mobile */
        height: 120px; /* Slightly smaller logo for mobile */
    }

    .header-table .title {
        font-size: 16px; /* Smaller title font size for mobile */
        margin-bottom: 10px;
    }

    .header-table .stats {
        text-align: center;
        font-size: 12px; /* Smaller stats font size for mobile */
    }

    .centered-title {
        font-size: 18px; /* Smaller title font size for mobile */
    }

    .sensor-table th, .sensor-table td {
        padding: 10px; /* Smaller padding for mobile */
        font-size: 12px; /* Smaller font size for mobile */
    }

    .sensor-table th {
        font-size: 14px; /* Smaller header font size for mobile */
    }

    footer {
        font-size: 12px; /* Smaller footer font size for mobile */
    }
}
<style>
    ul { list-style-type: none; padding: 0; }
    li { margin: 5px 0; }
    li a { text-decoration: none; color: #0066cc; }
    li a:hover { text-decoration: underline; }
</style>
/* style.css */
h3 {
  font-size: 1.1rem;
  margin: 0 0 0.05em 0;  /* top right bottom left */
  padding: 0;
  line-height: 1.1;
}

h4 {
  font-size: 1rem;
  margin: 0 0 0.0em 0;  /* top right bottom left */
  padding: 0;
  line-height: 1.2;
  font-weight: normal;   /* makes h4 visually lighter than h3 */
}