@font-face {
	font-family: 'Mulish';
	src: url('Mulish-VariableFont_wght.ttf') format('truetype');
        font-style: normal;
}
@font-face {
	font-family: 'Mulish';
	src: url('Mulish-Italic-VariableFont_wght.ttf') format('truetype');
	font-style: italic;
}

* {
	font-family: "Mulish", sans-serif;
}

body {
	width: 100vw;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body > header {
	width: 100%;
	margin-bottom: 2lh;
	display: flex;
	justify-content: center;
	background-color: #952222;
	border-bottom: 5px solid #12287e;
}

body > header > nav {
	width: 100%;
	max-width: 1000px;
	display: flex;
}

body > header > nav > a {
	padding: 1lh;
	color: white;
	text-decoration: none;
}
body > header > nav > a:first-child {
	padding: .5lh;
}

body > header > nav > a > img {
	height: 5lh;
	margin-bottom: -3lh;
}

body > main {
	width: 100%;
	max-width: 900px;
	padding: 0 clamp(.5em, calc(20vw - 50px), 100px);
	flex-grow: 1;
	line-height: 1.25lh;
	box-sizing: border-box;
}

h1 {
	line-height: 1.25em;
}

.article-list a {
	display: block;
	padding: 1em 0;
	color: black;
	text-decoration: none;
	border-top: 1px solid #dddddd;
}

.article-list h4 {
	margin: 0;
	font-size: 1.5em;
}

p.paging-controls {
    display: flex;
    justify-content: center;
    gap: 1em;
}

p.paging-controls a {
    padding: .25em 1em;
    border: .2em solid #12287e;
    font-weight: bold;
    color: #12287e;
    transition: .1s;
}

p.paging-controls a:hover {
    background-color: #12287e;
    color: white;
}

p.paging-controls span {
    padding: .25em 1em;
    border: .2em solid grey;
    font-weight: bold;
    color: white;
    background-color: grey;
}

.article-details {
	font-weight: bold;
	color: grey;
}

/*.article-details {
	display: block;
	margin-bottom: 5lh;
}

.article-details dt {
    float: left;
    clear: inline-start;
}

.article-details dd {
    float: left;
	margin: 0 0 0 .5ch;
}

.article-details + * {
	clear: both;
}*/

figure.chart {
    margin: 1lh 0;
    padding: .5em;
    display: grid;
    grid-template-areas:
        'title title'
        'yaxis chart'
        'empty xaxis'
        'legend legend';
    grid-template-columns: auto 1fr;
}

.chart h3 {
    grid-area: title;
    margin-top: 0;
}

.chart .y-axis {
    grid-area: yaxis;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: max-content;
}

.y-axis span {
    font-size: 1.1em;
    padding: .5lh .25em;
}

.chart-area {
    width: 100%;
    height: 100%;
    position: relative;
}

.chart-area .lines {
    position: absolute;
    width: 100%;
    height: 100%;
    display:  flex;
    justify-content: space-between;
	flex-flow: row wrap;
}

.chart-area .line {
    height: 100%;
    border-left: 1px solid #aaa;
}

.chart-area .bars {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.chart-area .bar-set {
    width: 100%;
    height: 1.5lh;
    display: flex;
}

.chart-area .bar {
    width: calc( ( var(--val) / (var(--max) - var(--min)) ) * 100%);
    background-color: var(--color);
}

.chart .x-axis {
    grid-area: xaxis;
    width: 100%;
    display: flex;
    justify-content: space-between;
	--at: 10000px;
}

.chart .legend {
    grid-area: legend;
    text-align: center;
}

.legend span {
    display: inline-block;
}

.legend span:before {
    content: " ";
    display: inline-block;
    width: 1ex;
    height: 1ex;
    margin: 0 1ch;
    background-color: var(--color);
}

.chart .orange {
    --color: #eb8b43;
}
.chart .blue {
    --color: #00a6ff;
}
.chart .green {
    --color: #007051;
}
.chart .red {
    --color: #e22c17;
}
.chart .purple {
    --color: #534091;
}
.chart .light-blue {
    --color: #bfe6f3;
}
.chart .grey {
    --color: grey;
}

.x-axis span {
    width: 0;
    display: flex;
    justify-content: center;
	position: relative;
}
.x-axis span:before {
    content: " ";
    position: absolute;
    top: 0;
    height: 3px;
    border-left: 1px solid #aaa;
}

.x-axis.two-lines span:nth-child(even) {
	margin-top: clamp(0px,calc(var(--at) - min(900px,100vw)),1lh);
	position: relative;
}
.x-axis.two-lines span:nth-child(even):before {
    content: " ";
    position: absolute;
    top: clamp(-1lh,calc((var(--at) - min(900px,100vw)) * -1),0px);
    height: clamp(3px,calc(var(--at) - min(900px,100vw)),1lh);
    border-left: 1px solid #aaa;
}

.vertical .lines {
    flex-direction: column;
}

.vertical .line {
    border-left: 0;
    border-top: 1px solid #aaa;
    height: 0;
}

.vertical .bars {
    flex-direction: row;
}

.vertical .bar-set {
    flex-direction: column-reverse;
    height: 100%;
}

.vertical .chart-area .bar {
    width: 80%;
    height: calc( ( var(--val) / (var(--max) - var(--min)) ) * 100%);
}

.chart.vertical .y-axis {
    justify-content: space-between;
    gap: 1lh;
    margin: -.5lh 0;
}

.vertical .y-axis span {
    padding-top: 0;
    padding-bottom: 0;
}

.chart.vertical .x-axis {
    justify-content: space-around;
}

ol.two-column {
    column-count: 2;
    column-gap: 2em;
    column-width: 9em;
}
.box {
	padding:  1em;
	margin: 1em 0;
	border: 1px solid black;

    > *:first-child { margin-top: 0 }
    > *:last-child { margin-bottom: 0 }
}
table.table {
    width: 100%;
    border-spacing: 0;
    border: 2px solid #aaa;

    td, th {
        padding: .5em;
        text-align: left;
    }
    tbody {
        tr > * {
            border-top: 1px solid #ccc;
        }
        tr:first-child > * {
            border-top: 2px solid #aaa;
        }
        th[scope="row"] {
            border-right: 2px solid #ccc;
        }
        th[scope="row"]:has(+ th[scope="row"]) {
            border-right: none;
        }
    }
}
figure {
    max-width: 100%;
    overflow: auto;
    margin: 1em 0;
}

body > footer {
	width: 100%;
	text-align: center;
	padding: 0 .5em;
	margin-top: 2lh;
	border-top: 5px solid black;
}
body > footer > p {
    margin: .5em 0;
    margin: .5lh 0;
}