@font-face
{	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 200;
	src: url(icons/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDAvHOej.woff2) format('woff2');
}

@font-face
{	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(fontes/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face
{	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(fontes/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fontes/wEOsEADFm8hSaQTFG18FErVhsC9x-tarWV3PuMp0ciZb.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face
{	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fontes/wEOsEADFm8hSaQTFG18FErVhsC9x-tarWV3PuMR0cg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root
{	--chan:25%;
	--dark:RGB(0,25,50); /* map, here */
	--back-up:RGBA(0,40,80,.95);
	--back-down:RGBA(0,40,80,.75);
	--back:RGBA(0,40,80,1);
	--theme:RGBA(0,60,120,.65);
	--high:RGBA(0,80,160);
	--line:RGBA(0,125,250,.25);
	--inline:RGBA(0,125,250,.65);	

	--here:#8FF;
	--red:#848;
	--bad:#FB6;
	--good:#8F4;
	--auto:400vh; /* attention aux listes */
	--button:#FFF;
	--black:#012;	
}

/* ICONES */

sup 
{	font-family:"Material Symbols Outlined";
    font-size:inherit; vertical-align:middle;
    width:1em; height:1em; display:inline-block; line-height:1em;
}

main a sup { margin-right:0.5em; font-size:150%; }
menu a sup { margin-right:0; }


/* LAYOUT */ 

html
{	height:100%;
	scrollbar-color: var(--high) transparent;
  	scrollbar-width: thin;
	background-image:url("wall/ka.jpg");
	background-size:cover;
	background-position:50% 50%;
	transition:background 1s; 
}

body
{	position:fixed; top:0px;
	color:white;
	font-family:"Fira Sans Condensed",monospace,sans-serif;
	font-weight:400;
	display:flex; flex-direction:row;
	font-size:1.0em;
	height:100%;
	width:100%;	
	margin:0; padding:0;
	user-select:none; /* anti missclick */

	background-color:var(--back);
	background:linear-gradient(0deg, var(--back-up) 30%,var(--back-down));
	overflow:hidden;	
}

/* MENU */

menu
{	margin:0; padding:0em;
	background-color:var(--high);
	flex-grow:0; 
	z-index:10;
	position:sticky; top:0;
}

nav
{	background-color:var(--theme);
	z-index:20;
}

menu,nav { padding-top:1em; } /* pour notify */


/* PRINCIPALE ======================= */

main /* là où y'a tout */
{	margin:0; padding:0em; padding:2em 1em 0 1em;
	border-left:2px solid transparent;
	flex-basis:0;
	flex-grow:3;	
	display:block;
	/*align-items: stretch;*/ /* réel height 100% */
	display:flex; /* display:flex; pour avoir l'écran complet, genre la carte */	
	flex-direction:column;
	overflow-y:scroll;
}

main>header
{	position:fixed; top:0; left:0; display:block; width:100%;
	line-height:1.5em; height:1.5em; overflow:hidden; 
	margin:0; z-index:20; pointer-events:none;
}

main>header>s { background-color:var(--red); color:white; }
main>header>u { background-color:green; color:white; }
main>header>i { background-color:grey; color:white; }

section /* zone de contenus */
{	display:flex; 
	flex-wrap:wrap;
	box-sizing:border-box;	
	margin:0; 
	flex-grow:0;
}

article /* une ligne de contenu */
{	margin:0 0 1em 0;
	box-sizing:border-box;	
	/*flex-grow:1; flex-basis:0;*/
	flex-basis:100%; /* désormais ligne complète */
	flex-grow:1;
	display:flex;	
	justify-content:space-between; /* sert à rien... */
	border-radius:.3rem;
	flex-wrap:wrap; /* test */	
	animation: section 0.2s ease; /* mieux sur article que sur section pour les popup */
}	


article>div
{	margin:0;
	flex-grow:1;
	flex-basis:0;
	box-sizing:border-box;
	padding:1em;	
}


footer
{ 	padding:1em; padding-bottom:2em;
	text-align:center; flex-basis:100%; color:lightgray; 
}



/* */

p { margin:0 0 1em 0; }
u { text-decoration:none; color:var(--good); }
s { text-decoration:none; color:var(--bad); }
i { text-decoration:none; color:var(--here); font-style:normal; }

img { pointer-events:none; }

hr { border:none; border-top:1px solid var(--line); }

time { color:var(--here); }
a>time { color:var(--black); }
a>u { color:#080; }
time.hidden { display:none; }


sub /* a ou label */
{	background-color:greenyellow; color:black; border-radius:100%; 
	width:1em; line-height:1em; display:inline-block; text-align:center; vertical-align:middle; /* sur menu pour pas changer taille icone */	
}
menu sub { font-size:60%; }
nav sub { font-size:50%; background-color:var(--here); }
sub.bad { background-color:var(--bad); }

p>mark {margin:0; }



code
{	animation: ajouter 0.5s ease;
}

main>header>s, main>header>u, main>header>i
{	display:block; text-align:center; 
	pointer-events:none; /* sinon pb quand opacité */
	animation: notify 5s linear forwards;
}


/* next_time */

body>div#next { font-size:150%; font-style:italic; z-index:100; display:inline-bloc; position:fixed; top:.1em; right:1em;}





/* ANIMS */


@keyframes section
{	0% { opacity:0; transform:translateY(-12px); }
	100% { opacity:1; transform:translateY(0); }
}

@keyframes important
{	0% { opacity:0; transform:scale(0.9); }
	100% { opacity:1; transform:scale(1.0); }
}

@keyframes ajouter
{	0% { opacity:0; }
	100% { opacity:1; }
}

@keyframes loading
{	0% { opacity:.5; }
	100% { opacity:.25; }
}

@keyframes notify
{	0% { opacity:0; }
	5% { opacity:1; }
	85% { opacity:1; }
	100% { opacity:0; }
}