@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('/fonts/cmunrm.woff') format('woff');
	font-weight : normal;
	font-style  : normal;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('/fonts/cmunbx.woff') format('woff');
	font-weight : bold;
	font-style  : normal;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('/fonts/cmunti.woff') format('woff');
	font-weight : normal;
	font-style  : italic;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('/fonts/cmunbi.woff') format('woff');
	font-weight : bold;
	font-style  : italic;
}

h1#title {
	text-align    : center;
}

/*
 * Quotes
 */
blockquote {
	font-style   : italic;
}

/*
 * Code blocks.
 */
pre {
	margin-left  : 2em;
}

/*
 * Overall page
 */
body {
	width            : 75%;
	text-align       : justify;
	margin-left      : 12.5%;
	margin-right     : 12.5%;
	background-color : #ffeed4e0;
	font-family      : 'Computer Modern Serif';
}

@media only screen and (max-width: 700px) {
	body {
		width            : 90%;
		margin-left      : 5%;
		margin-right     : 5%;
	}
}

/*
 * Menu
 */
header .menu {
	font-size   : 1.5em;
	text-shadow : 4px 4px 4px #aaa;
}

header .menu {
	list-style-type      : none;
	padding-inline-start : 0px;
}

header .menu li {
	display           : block;
	position          : relative;
}

header .menu a {
	display         : flex;
	justify-content : center;
	align-items     : center;
	color           : darkblue;
	height          : 100%;
	text-decoration : none;
}

header .menu a:hover {
	background-color : #fbd7ad;
}

/*
 * Emphasize the fact that it's an external link
 * to a new tab.
 */
header .menu a[target="_blank"]:hover {
	background-color : #ffbe71;
}

header .menu a[target="_blank"] {
	background-image    : url(/ext-link.svg);
	background-position : center right;
	background-repeat   : no-repeat;
}

header .menu	 {
	display           : grid;
	grid-auto-flow    : column;
	grid-auto-columns : 1fr;

	border-top        : 1px solid black;
	border-bottom     : 1px solid black;

	padding-top       : 3px;
	padding-bottom    : 3px;

	margin-bottom     : 3px;
}

@media only screen and (max-width: 800px) {
	header .menu {
		grid-auto-flow : row;
	}
}

/*
 * Important message
 */
header .important {
	font-style    : italic;
	text-align    : center;
	margin-top    : 1em;
	margin-bottom : 1em;
}

/*
 * Meta data block
 */

header .metas {
	border  : 1px black dotted;
	padding : 1em;
}

header .metas .title {
	text-decoration : underline;
}

header .metas h1.title {
	text-align    : center;
}

/*
 * Current article's tags, translations
 */
header .metas .trs,
header .metas .tags,
header .metas .date,
header .metas .update {
	text-align: right;
}

@media only screen and (min-width: 700px) {
	.toc-series {
		display : flex;
	}

	.toc, .series {
		width   : 50%;
		margin  : auto;
	}
}

.toc h2, .series h2 {
	text-align      : center;
	text-decoration : underline;
}

/*
 * Center all images by default
 */
img {
	display       : block;
	margin-left   : auto;
	margin-right  : auto;
	max-width     : 75%;
	max-height    : 90vh;
}

/*
 * Stylized image's captions.
 */

figure figcaption {
	color         : dimgrey;
	margin-left   : 20%;
	margin-right  : 20%;
	font-style    : italic;
}

/*
 * All our <img> are wrapped in <figure>.
 * But figure by default is a display:block.
 *
 * So we allow to revert that eventually, instead
 * of not having img in figure (why not).
 */
figure.inlined-figure {
	display             : inline-block;
	margin-block-start  : 0;
	margin-block-end    : 0;
	margin-inline-start : 0;
	margin-inline-end   : 0;
}

@media only screen and (max-width: 700px) {
	figure {
		margin-left   : 5%;
		margin-right  : 5%;
	}

	figure figcaption {
		margin-left   : 5%;
		margin-right  : 5%;
	}
}

/*
 * Fixed-width font is more enjoyable when toggling
 * between [+] and [-].
 *
 * Also, the default link underline is a bit off visually.
 */
a.toggler {
	font-family     : monospace;
	font-size       : larger;
	text-decoration : none;
}

/*
 * Site's footer.
 */
footer {
	text-align    : center;
	margin-top    : 2em;
	margin-bottom : 20%;
}

/*
 * A long time ago, in a far away galaxy.
 * http://media1.huoc.org/style.css
 */

table {
    border-bottom: solid 1px #778899;
    border-top: solid 1px #4586ab;
    border: none;
    margin: auto;
    padding: 0em;
}

th {
	padding: 1em;
    border-bottom: dashed 1px #778899;
    text-align: center;
}

th + th {
    border-left: dashed 1px #778899;
}

tr {
    margin: 1em;
    padding: 1em;
}

td {
    padding: 1em;
    vertical-align: middle;
}

tr + tr td {
    border-top: dashed 1px #778899;
}

td + td {
    border-left: dashed 1px #778899;
}

/*
 * New main page, from grid to basic table
 */

table.articles {
	/* center */
	margin : 1em auto;
}

table.articles tr, table.articles td, table.articles th {
	padding : 1em 0.2em 1em 0.2em;
}

table.articles td.title, table.articles .tags {
	text-align  : center;
}

table.articles a.sort-me {
	color : black;
}

table.articles .date {
	text-align  : center;
}

@media only screen and (min-width: 700px) {
	table.articles .date {
		white-space : nowrap;
		padding     : 1em;
	}
}

.articles th a[data-sort="asc"]::after {
	content: " ▵";
}

.articles th a[data-sort="desc"]::after {
	content: " ▿";
}

div.center {
	margin-left  : auto;
	margin-right : auto;
	width        : fit-content;
}

table.articles a.sort-me {
	color : black;
}

table.articles .date {
	text-align  : center;
}

@media only screen and (min-width: 700px) {
	table.articles .date {
		white-space : nowrap;
		padding     : 1em;
	}
}

.articles th a[data-sort="asc"]::after {
	content: " ▵";
}

.articles th a[data-sort="desc"]::after {
	content: " ▿";
}

.w-3em {
	width : 3em;
}

figure.framed img {
	border                : 2em solid white;
	outline               : 0.2em solid saddlebrown;
}

/*
 * Stylized image's captions.
 */

figure figcaption {
	color         : dimgrey;
	margin-left   : 20%;
	margin-right  : 20%;
	font-style    : italic;
}

@media only screen and (max-width: 700px) {
	figure {
		margin-left   : 5%;
		margin-right  : 5%;
	}

	figure figcaption {
		margin-left   : 5%;
		margin-right  : 5%;
	}
}