/** Variables **/

:root
{
	--couleur-violet-1: #dccaed;
	--couleur-violet-2: #b38dd9;
	--couleur-violet-3: #8a50c4;
	--couleur-violet-4: #613092;
	--couleur-violet-5: #452268;

	--couleur-fond:  var(--couleur-violet-1);
	--couleur-police: var(--couleur-violet-5);
	--couleur-accentuation: var(--couleur-violet-4);
	--couleur-contraste: #ffcc00;
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--couleur-fond: var(--couleur-violet-5);
		--couleur-police: var(--couleur-violet-1);
		--couleur-accentuation: var(--couleur-violet-2);
	}
}

html
{
	background: var(--couleur-fond);
	color: var(--couleur-police);
	font-family: system-ui, sans-serif;

	display: flex;
	flex-direction: column;
	align-items: center;
}

body
{
	width: 100%;
	max-width: 60em;
	display: flex;
	flex-direction: column;
	align-items: center;

	font-size: 1.25em;
}

nav
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

footer
{
	text-align: center;
	color: var(--couleur-accentuation);
}

a { 
	color: var(--couleur-accentuation);
}

a:hover, a:focus
{
	background-color: var(--couleur-police);
	color: var(--couleur-fond);
}

nav a {
	text-decoration: none;
	text-decoration-color: var(--couleur-contraste);

	font-size: 1.25em;
	margin: 1em;
	padding: 0.75em;
}

a.nav-active {
	text-decoration: underline overline;
}

#contenu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#liste-haikus, #liste-courts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#liste-haikus {	width: 75%; }
#liste-courts { width: 90%; }

#liste-haikus > div {
	margin-bottom: 1.75em;
}

#tout {
	width: 90%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

#tout > div {
	margin: 0.75em;
}

:is(#tout, #liste-courts, #liste-longs) a {
	color: var(--couleur-police);
}

:is(#liste-courts, #liste-longs) {
	list-style-type: "\2767 ";
}

:is(#tout, #liste-courts, #liste-longs) :is(a:hover, a:focus)
{
	background-color: var(--couleur-accentuation);
	color: var(--couleur-fond);
}


hr.footnotes {
	width: 40%;
}

a.footnote
{
	text-decoration: none;
	margin-right: 0.4em;
}


hr#fin {
	width: 25%;
	margin: 1em 0px 0px;
	border-color: var(--couleur-police);

	align-self: flex-end;
}

hr#pied {
	width: 90%;
	margin: 1em 0px;
	border-color: var(--couleur-accentuation);
}

div#timestamp {
	align-self: flex-end;
	font-size: 0.9em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }