:root{
    --FOND:#fd230c;
    --GRIS:#E6E6E6;
    --S:1.5rem;
    --M:2rem;
    --indent:1rem;
    --etoile:12rem;
}
@font-face {
    font-family: 'Junicode';
    src: url('Junicode-Regular.otf');
}
p, nav p a{
font-size:var(--S)
}
a:hover {color:var(--FOND)}


p {margin:var(--indent);}
* {font-family: Junicode}
h1, h2, h3, h4,nav,  nav a {
font-weight:normal;
font-size: var(--M);
}
h3, h2, h1, ol,li {margin:0;padding:0}

.images {
    display:flex;
    height:50vh;
    overflow-x:scroll;
    scroll-behavior: smooth;
    padding-right:4ch;
}
.images img {border-left:4ch solid transparent}
aside span {display:block;position:absolute;transform-origin:center; }
aside {
	width:var(--etoile);
	cursor:pointer;
	position:absolute;
	left:0;
	z-index:100;
	height:var(--etoile); 
	display:flex;
	justify-content:center;
	align-items:center
}

nav section {max-width:770px}
header {
	align-items:center;
	margin-left:var(--etoile);
	display:flex;
	height:6rem;
}

body {margin:0;
}
html{
background:linear-gradient(180deg, var(--FOND), var(--GRIS) 20%);
min-height:100vh
}

a {color:black}

nav{padding:var(--indent);padding-top:var(--etoile)}
nav li h3 {margin-left:calc(var(--indent) * 2)}
nav li a {margin-left:calc(var(--indent) * 4 )}
ol {list-style:none; display:flex;flex-direction:column-reverse;}

nav {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
nav::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

nav {

	overflow-y:scroll;
	width:fit-content;
/*
	background:var(--GRIS);
*/
	background-image:url('fond.png');
	background-size:100%;
	left:calc(-100vw - var(--indent) * 2);
	transition:left .5s;
	top:0;
	bottom:0;
	position:fixed;
	display:flex;
	flex-direction:column;
	max-width:100vw;
	margin-right:var(--indent)
}

.show-nav {
	left:0;
}

.bg {
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
pointer-events:none;

background:linear-gradient(180.05deg, var(--FOND), var(--GRIS) 3rem);
z-index:-1;

}

body > p {max-width:80ch;margin-right:2ch;margin-left:auto}