@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&family=Oswald:wght@300&display=swap');

@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
	color: #000;
}

body {
	width: auto;
	font-family: 'Noto Sans JP', sans-serif;
	padding: 0 2%;
	margin: 0;
	min-height: 100%;
	text-align: center;
}

.profile-image img{
	width: 280px;
	height: 280px;
	border-radius: 50%;
}

.titre {
	margin: 0;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
}

.container {
	display : flex;
	position: relative;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.centered-element {
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding: 15px;
	width: 80%;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.progression {
	display: flex;
	position: relative;
	float: none;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 00px;
	padding-bottom: 00px;
	justify-content: center;
	flex-wrap: wrap;
	margin-right: auto;
	margin-left: auto;
	max-width: 580px;
}

@keyframes animation {
  0% {fill:#16d920}
  12.5% {fill:#40dd62}
  25% {fill:#55e184}
  37.5% {fill:#6ae493}
  50% {fill:#80e8b4}
  62.5% {fill:#95ecb9}
  75% {fill:#aaf0c7}
  87.5% {fill:#d5f7e2}
  100% {fill:#e9fbf2}
}
@keyframes animation-cadre {
  0% {transform: rotate(0deg)}
  100% {transform:rotate(360deg)}
}

.progression svg {
	fill:#d5f2f7;
	animation-name: animation-cadre;
	animation-duration: 50s;	
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
}
.progression svg .attente-01 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.progression svg .attente-02 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
.progression svg .attente-03 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 2s;
	animation-iteration-count: infinite;
}
.progression svg .attente-04 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 3s;
	animation-iteration-count: infinite;
}
.progression svg .attente-05 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 4s;
	animation-iteration-count: infinite;	
}
.progression svg .attente-06 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 5s;
	animation-iteration-count: infinite;
}
.progression svg .attente-07 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 6s;
	animation-iteration-count: infinite;
}
.progression svg .attente-08 {
	animation-name: animation;
	animation-duration: 8s;	
	animation-delay: 7s;
	animation-iteration-count: infinite;
}