/**::selection {}*/
/*@property --nom {
syntax: "<angle><color><length><number><percentage>";
inherits: true;
initial-value: 0%;
}*/
:root
{
background: grey url(Fonds/Fond.webp) no-repeat center / cover;
color: black;
font-family: 'Inter', Sans-Serif;
font-weight: 400;
font-size: 25px;
}
h1, h2, h3, h4, h5, h6, summary
{
--font-size-ratio: 1;
color: inherit;
font-family: 'Cabin Condensed', Sans-Serif;
font-weight: 400;
font-size: calc(2em * var(--font-size-ratio));
text-transform: uppercase;
& > em {display: none;}
}
h2 {--font-size-ratio: 0.9;}
h3 {--font-size-ratio: 0.8;}
h4 {--font-size-ratio: 0.7;}
h5 {--font-size-ratio: 0.6;}
h6 {--font-size-ratio: 0.5;}
p {}
ul {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
margin: 1em auto;
background: black;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}

/* Markdown */
p.md, .md p
{
& a:not([class]) {text-decoration: underline;}
& img {display: block; max-width: 100%; margin: 1em 0;}
}

/* 404 */
#erreur404
{
width: 320px;
margin: auto;
text-align: center;
}
#erreur404 strong
{
font-size: 1.5em;
font-weight: 800;
line-height: 1.5em;
}
#erreur404 strong span
{
display: block;
font-size: 2em;
}
#erreur404 p {margin: 1em 0;}
#erreur404 a
{
display: inline-block;
padding: 0.25em;
border-radius: 0.25em;
font-size: 0.9em;
}

/**/

main
{
display: flex;
min-height: 100vh;
flex-direction: column;
place-content: center;
place-items: center;
gap: 1em;
box-shadow: inset 0 0 25vmin black;
}
main h1
{
}
main h1 img
{
display: block;
width: 100%;
max-width: 40em;
}
main p
{
padding: 0 2em;
color: white;
font-weight: 600;
text-shadow: 0 0 1em black;
}
main a
{
display: grid;
padding: 1em;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.25em;
backdrop-filter: blur(20px) brightness(0.75);
box-shadow: 0 0.25em 0.5em rgb(0 0 0 / 0.5);
border-radius: 1em;
color: lightgrey;
font-size: 0.75em;
font-weight: 800;
text-align: left;
text-transform: uppercase;
& i {font-size: 2em;}
&:hover {color: goldenrod;}
}