/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* The body is the container and uses the CSS Grid layour model */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
}

body {
    background-color: var(--primary);
}

/* Set the maximum width of the body to a reasonable size */
.root {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: var(--dark);

}

/* All the text is in the Roboto font */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

/* Define a color pallete */
:root {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

header h1 {
    /* Use a bigger font for the main header*/
    font-size: x-large;
    text-align: left;
}

article h1 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-color: var(--dark);
}

article table {
    overflow-x: auto;
    width: 100%;
}

/* All the h1 headings are centered and use a bold font */
h1 {
    text-align: center;
    font-weight: bold;
}

/* The header background is the primary color */
header {
    background-color: var(--primary);
    color: var(--light);
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Each section  has a padding, rounded corders and a small shadow*/
section {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    background-color: var(--light);
}

.two {
    grid-template-columns: 1fr 1fr;
}

section {
    display: grid;
    gap: 20px;
    width: 100%;
    align-items: center;
}

section h1 {
    grid-column: 1/-1;
}

.center {
    text-align: center;
}

/* Style the links so they are visible (also on hoover and when visiter) */
a {
    color: var(--primary);
}

a:hover {
    font-weight: bolder;
}

a:visited {
    font-weight: lighter;
}

/* Make each table in an article more stylish */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 5px;
    font-size: 0.9em;
}

th {
    background-color: var(--dark);
    color: var(--light);
    font-weight: bold;
    text-align: left;
}

thead~tbody tr:nth-child(odd) {
    background-color: var(--light);
}

thead~tbody tr:nth-child(even) {
    background-color: var(--secondary);
    color: var(--light);
}

thead~tbody tr:nth-child(even) a {
    color: var(--light);
}


/* Do not display article if their tables are empty */
article:has(table) {
    display: none;
}

article:has(tbody > tr) {
    display: block;
}

.graph {
    width: 100%;
}