@font-face {
	font-family: 'saira_condensedthin';
	src: url('../ui/font/sairacondensed-thin-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+000-5FF;
  }



*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: clamp(1rem, 5.3vw - 1.3rem, 2rem);
	--color-bg: rgb(43, 40, 43);
	--bg2 : rgb(35,42,55);
	--color-link: rgb(97, 220, 163);
	--clr: snow;
	--word-index:1;
	--secs: 3s;
}

body {
	margin: 0;
	color: var(--clr);
	background: var(--bg2) /*url(../img/fond_spatial.svg) no-repeat*/;
	background-size: cover;
	font-family: 'saira_condensedthin', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

  }

main {
	height: 100vh;
	overflow: hidden;
}

.intro {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100vw;
	height: inherit;
	justify-content: center;
}


.word {
	/*background-color: var(--clr);*/
	color :var(--clr);
	/*border-radius:4px;*/
	/*box-shadow:3px 3px 5px #333;*/
	padding:.1rem .2rem;
	display: inline-block;
	animation-name: remuer;
  animation-duration: 450ms;
  animation-delay: calc(var(---intro_word-index) * 150ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, 0, .1, 1);
}

@keyframes remuer {
	0% {
	  opacity: 0;
	  transform: scale(1.6) translateY(-155px);
	}

	100% {
	  opacity: 1;

	}
  }

.move {
	position:relative;
	top:.4em;
	top: .4em;
	left: 0;
	margin: 0;
	padding: 0;
}

.whitespace {
	display: none;
}

.chapitres {
	position: absolute;
	top: .8rem;
	display: flex;
	width: 100vw;
	justify-content: space-around;
	z-index: 1;
}

.chapitres button {
	border: 0;
	color: inherit;
	white-space: nowrap;
	background: none;
	font: inherit;
	cursor: pointer;
	color: var(--color-link);
	font-size: 0.75rem;
}


.chapitres button::before {
	content: "";
	margin-right: 0.5rem;
	display: inline-block;
}

.chapitres button::after {
	content: "";
	margin-left: 0.5rem;
	display: inline-block;
}

.chapitres button:hover {
	color: var(--clr);
}

.content {
	position: absolute;
	top:0;
	width: 100vw;
	height: 100vh;
}


.content p, .intro p {

		hyphens: auto;
		line-height: 1.4;
		text-align: justify;
		font-size:.8rem;
		padding: .5em;
		margin:0;

}


/*.diapos {

	place-content: center;
}*/

.diapos .diapo {
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(.2, 0, .1, 1);
	columns: 2 45ch;
	gap: 1rem;
}

.diapos .diapo.active {
	opacity: 1;
	position: absolute;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.diapo .tombe {
	transition: transform .4s;
	transform: translateY(155px);
	animation-name: remuer;
  animation-duration: 450ms;
  animation-delay: calc(var(--word-index) * 150ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, 0, .1, 1);
  padding:.1rem .2rem;
  display: inline-block;
}

/*.bougera {
}*/

.move-button {
	color: var(--color-bg);
	z-index: 2;
position: relative;
bottom: .4rem;
}

.intro h1 {
background: var(--bg2);
font-size: 4rem;
margin: 0 auto;
animation: fade-out calc(var(--secs) / 2) calc(var(--secs) * 1.5) ease-out forwards;
}

@keyframes fade-out {
	to {
	  opacity: 0;
	}
  }

  .page {
	font-size:3rem;
	position:absolute;
	bottom:.8rem;
	right: .8rem;
	opacity: .7;
  }

  nav {
	width:8em;
	position: absolute;
	bottom: .8em;
	left: .8em;
	padding: .5em .8em;
}

a.retour_accueil {
	color: var(--color-link);
	font-size: .75rem;
  }

  a.retour_accueil:hover {
	color:var(--clr)
  }