body,
html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	background: rgb(22,53,91);
	background: radial-gradient(circle, rgba(22,53,91,1) 10%, rgba(35,38,38,1) 46%, rgba(28,52,52,1) 93%);
}

h1 {
	font-size: 24px;
	margin: 10px 0 0 0;
	font-weight: lighter;
	text-transform: uppercase;
	color: #eeeeee;
}

p {
	font-size: 12px;
	font-weight: light;
	color: #468adf;
	/*transition: all 0.4s ease-in-out;
	&:hover {
		color: #ffffff;*/
}

span a {
	font-size: 18px;
	color: #cccccc;
	text-decoration: none;
	margin: 0 10px;
	transition: all 0.4s ease-in-out;
	&:hover {
		color: #ffffff;
	}
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.avatar {
    width: 150px; /* ajustez la taille du cercle selon vos besoins */
    height: 150px; /* ajustez la taille du cercle selon vos besoins */
    border-radius: 50%; /* crée un cercle */
    overflow: hidden; /* assure que l'image reste dans le cercle */
    margin: 0 auto; /* centre le cercle horizontalement */
}

.avatar-img {
    display: block; /* assure que l'image est centrée à l'intérieur du cercle */
    width: 100%; /* assure que l'image remplit le cercle */
    height: auto; /* assure que l'image conserve son ratio */
}

img {
	width: 100%;		
}

.content {
	width: 100%;
	max-width: 600px;
	padding: 20px 40px;
	box-sizing: border-box;
	text-align: center;
}

$base: #EFEEEE;
$loaderSize: 300px;
$animationDuration: 2.2s;

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

.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: $base;
}

.loader {
  $posOffset: 6px;
  $negOffset: -$posOffset;
  $blur: 16px;

  width: $loaderSize;
  height: $loaderSize;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border: 1px solid rgba(#FFF, 0.2);
  background-color: $base;
  box-shadow: $negOffset $negOffset $blur rgba(#FFF, 0.5),
              $posOffset $posOffset $blur rgba(#D1CDC7, 0.5);
  animation: tiny-pulse ($animationDuration / 2) ease-out infinite;
  
  &:before, &:after {
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: inherit;
    border-radius: inherit;
    border: inherit;
    background-color: transparent;
    box-shadow: inherit;
    animation: pulse $animationDuration ease-out infinite;
  }
  
  &:after {
    animation-delay: $animationDuration / 2;
  }
}

@keyframes tiny-pulse {
  0% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
  50% {
    transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(4, 4, 4);
  }
}