:root {
    --color-level3: green;
    --color-level2: moccasin;
    --color-level1: orange;
    --color-level0: red;
    --color-unknown: #eee;
}

.directory { display: none; }

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

#results {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
	padding: 3em;
    padding-top: 0;
    margin: auto;
    border-collapse: separate;
    border-spacing: 2px;
}

#flexwrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 2em;
    gap: 2em;
}

th {
	text-align: end;
}
td {
	text-align: center;
	border-radius: 2px;
}

/* Colors */
.na {
	background-color: var(--color-level3);
	color: var(--color-level3);
}
.l3 {
	background-color: var(--color-level3);
	color: var(--color-level3);
}
.l2 {
	background-color: var(--color-level2);
	color: var(--color-level2);
}
.l1 {
	background-color: var(--color-level1);
	color: var(--color-level1);
}
.l0 {
	background-color: var(--color-level0);
	color: var(--color-level0);
}

thead td {
	font-weight: bold;
	line-height: 1.5;
	width: 20px;
	height: 10rem;
	vertical-align: bottom;
}
thead td div {
	writing-mode: vertical-rl;
    text-align: start;
    white-space: nowrap;
}

.sum {
    width: 100px;
    text-align: left;
}
table { 
    margin:auto;
}

#resultsSummary, #key {
    margin-left: 15%; 
}

@media (max-width: 768px) {
    #resultsSummary, #key {
        margin-left: 5%;
    }
    #results {
        padding: 1em;
    }
    .intro {
        margin: 1em;
        font-size: 100%;
    }
}

#resultsSummary p {
    margin: 0
}
#resultsSummary strong {
    font-size: 120%;
    margin: 0 1em;
}
.intro {
    margin: 1em 2em;
    font-size: 130%; 
    color: #666;
    font-style: italic;
}

.language {
    text-align: left;
    padding-left: 5px;
}
.language a {
    font-weight: bold;
}

/* Gauges */
.gauge0 {
    display: inline-block;
    height: 16px;
    background-color: var(--color-level0);
}
.gauge1 {
    display: inline-block;
    height: 16px;
    background-color: var(--color-level1);
}
.gauge2 {
    display: inline-block;
    height: 16px;
    background-color: var(--color-level2);
}
.gauge3 {
    display: inline-block;
    height: 16px;
    background-color: var(--color-level3);
}
.gaugeq {
    display: inline-block;
    height: 16px;
    background-color: var(--color-unknown);
}

.lowest {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 7px;
    font-size: 6px;
    vertical-align: top;
}

.low0 { border-left: 12px solid var(--color-level0); }
.low1 { border-left: 12px solid var(--color-level1); }
.low2 { border-left: 12px solid var(--color-level2); }
.low3 { border-left: 12px solid var(--color-level3); }