@charset "utf-8";

:root {
	--link-color: #003BC6;
	--accent-color: #e5274c;
}

@font-face {
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/Inter-Light.woff2") format("woff2")

}
@font-face {
	font-family: 'Inter';
	font-style:  normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Inter-Regular.woff2") format("woff2")
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
	font-size: 16px;
	font-weight: 300;
	height: 100%;
}

body {
	font-family: Inter, sans-serif;
	line-height: 1.6;
	padding: 1rem 2rem;

	color: #333;
}

a {
	color: var(--link-color);
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 124, 188, 0.25);
}

a:hover {
	border-bottom: 1px solid var(--link-color);
}

a:visited {
	color: var(--link-color);
}


h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin: 0 0 2.0rem 0;
	line-height: 1.0;
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

table{
    border-collapse:collapse;
    font-size:0.9rem;
}

td,th {
    padding: 4px 16px 4px 4px;
}

th:last-child,td:last-child{
    padding-right:4px;
}

tr:nth-child(even){
    background-color:#eee
}

th{
    text-decoration: underline;
    text-align:left;
}

header {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3rem;
}

header h3 { margin: 0; }


main {
	margin-left: auto;
	margin-right: auto;
	min-height: calc(100vh - 14rem);

	display: flex;
	flex-grow: 1;
}

aside {
	width: 240px;
	margin-right: 4rem;
}

aside h3 {
	margin-bottom: 1rem;
}

aside ul {
	padding-left: 0;
	list-style: none;
	margin: 0.25rem 0 2.0rem 0;
}

aside .title {
	font-size: 1.25rem;
	font-weight: bold;
}

aside li {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

aside li.active a {
	font-weight: bold;
	border-bottom: 1px solid var(--link-color);
}

footer {
	margin: 4rem auto 1rem auto;
}

@media (max-width: 720px) {

	header {
		margin-bottom: 2rem;
	}

	main {
		display: block;
		padding-top: 0;
	}

	aside {
		width: 100%;
		margin-bottom: 2rem;
		margin-right: 0;
	}

	aside h3 {
		display: none;
	}

	aside ul {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	aside li {
		width: 7em;
		margin-right: 2em;
	}

}

.meta {
	margin-top: -1.5rem;
	margin-bottom: 2rem;
	font-size: 15px;
}

article {
	width: 100%;
	margin: 0;
}

/* Make things readable and wrap at 42rem
 * we don't do all because we want images, code to be wide. */
article blockquote,
article p,
article li,
article figure,
article img {
	max-width: 42rem;
}

article blockquote,
article p {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
}

article h2,
article h3,
article h4,
article h5,
article h6 {
    border-bottom: 1px solid #999;
	max-width: 42rem;
	margin-top: 3.0rem;
	margin-bottom: 0;
    padding-bottom: 4px;

}

article blockquote {
	border-left: 2px solid var(--accent-color);
	padding: 0rem 2rem;
	margin-left: 0;
	font-weight: 400;
	color: #111111;
}

section ul {
	padding-left: 0;
	list-style: none;
}

section li {
	line-height: 0;
	margin-bottom: 2.0rem;
}

ul.inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 2em 0;
	padding: 0;
}

ul.inline li {
	display: inline-block; 
	margin: 2.5rem 2rem;
	padding: 0;
	text-align: center;
	line-height: 1.0;
	width: 240px;
	height: 160px;
}

ul.inline li a,
ul.inline li a:visited {
	text-decoration: none;
	border-bottom: none;
}

ul.inline li img {
	max-width: 240px;
	max-height: 160px;
}


figure {
	margin: 2rem 0;
	padding: 0;
}

figure img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figcaption {
	text-align: center;
    font-size: smaller;
    color: #666666;
}