body {
  font-family: 'Segoe UI Local', 'Segoe UI Web (West European)';
  background-color: #0070bf;
  text-align: center;
  color: white;
  cursor: none;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement */
  align-items: center; /* Centrer horizontalement */
  height: 100vh; /* Utiliser toute la hauteur de l'écran */
  margin: 0; /* Supprimer les marges par défaut */
}

body:not(*:root) {
  font-family: 'Segoe UI Web (West European)';
}

@font-face {
  font-family: 'Segoe UI Local';
  src: local('Segoe UI Light');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Local';
  src: local('Segoe UI Semilight');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Local';
  src: local('Segoe UI');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Local';
  src: local('Segoe UI Semibold');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Web (West European)';
  src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Web (West European)';
  src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Web (West European)';
  src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI Web (West European)';
  src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

.windows8 {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto; /* Ajout de cette ligne pour centrer l'animation */
}

.windows8 .wBall {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: rotate(225deg);
  animation: orbit 4.95s infinite;
}

.windows8 .wBall .wInnerBall {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  left: 0px;
  top: 0px;
  border-radius: 6px;
}

.windows8 #wBall_1 {
  animation-delay: 1.08s;
}

.windows8 #wBall_2 {
  animation-delay: 0.22s;
}

.windows8 #wBall_3 {
  animation-delay: 0.43s;
}

.windows8 #wBall_4 {
  animation-delay: 0.65s;
}

.windows8 #wBall_5 {
  animation-delay: 0.86s;
}

@keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin: 0%;
  }

  30% {
    opacity: 1;
    transform: rotate(410deg);
    animation-timing-function: ease-in-out;
    origin: 7%;
  }

  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin: 30%;
  }

  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin: 39%;
  }

  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin: 70%;
  }

  76% {
    opacity: 0;
    transform: rotate(900deg);
  }

  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.message {
  margin-top: 50px;
  font-size: 18px;
  line-height: .5;
  text-align: center; /* Ajout de cette ligne pour centrer le texte */
}

.footer {
  position: fixed;
  bottom: 20px;
  width: 100%;
  font-size: 18px;
}