/* Import Roboto Condensed from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

/* styles.css */
body {
    font-family: 'Roboto Condensed', Arial, sans-serif; /* Apply Roboto Condensed font */
    background-color: #e9ecef; /* Slightly warmer background color */
    color: #495057; /* Darker text color for better readability */
    margin: 0;
    padding: 0; /* Padding around the page */
}

.container {
    display: flex;
    flex-direction: column; /* Stacks rows vertically */
    margin: 0; /* Remove margin */
}

.row {
    display: flex;
    margin: 0; /* Remove margin */
}

.column {
    flex: 1; /* Ensures columns take up available space equally */
    background: #ffffff; /* White background for columns */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slightly larger shadow for depth */
    padding: 20px; /* Padding inside the columns */
    box-sizing: border-box; /* Include padding in width */
    margin: 0; /* Remove margins between columns */
}

.column h2 {
    margin: 0 0 1px; /* Minimal margin below the heading */
    font-size: 1.0em; /* Larger heading font size for emphasis */
    color: #ffffff; /* White text color for contrast */
    background-color: #006d77; /* Dark teal background for header */
    padding: 10px; /* Padding inside the header for spacing */
}

.column p {
    margin: 0; /* Remove margins between paragraphs */
    padding: 10px; /* Padding inside each paragraph */
}

.column p.value {
    background-color: #edf6f9; /* Light blue background for values */
    font-size: 1.6em; /* Larger font size for values */
    font-weight: bold; /* Bold font weight for values */
}

.column p.datetime {
    background-color: #eeeeee; /* Light grey background for datetime */
    font-size: 0.9em; /* Larger font size for values */
    font-weight: normal; /* Bold font weight for values */
}