body {
  background: radial-gradient(
      circle at 50% 0,
      rgb(255, 29, 29),
      rgba(255, 251, 251, 0) 70.71%
    ),
    radial-gradient(
      circle at 66% 75%,
      rgb(228, 27, 255),
      rgba(217, 255, 0, 0) 70.71%
    ),
    radial-gradient(
      circle at 93.3% 75%,
      rgb(139, 33, 245),
      rgba(217, 255, 0, 0) 70.71%
    ),
    radial-gradient(
      circle at 5% 40%,
      rgb(255, 255, 23),
      rgba(11, 186, 255, 0) 70.71%
    ),
    radial-gradient(
        circle at 6.7% 75%,
        rgb(4, 255, 75),
        rgba(255, 255, 255, 0) 70.71%
      )
      rgb(0, 0, 0);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.letter.hovered {
  color: red;
}

hr.longueBarre {
  width: 80%;
  margin: 20px auto; /* Centrer la ligne et ajouter un espacement vertical */
  border: 0;
  height: 1px;
  background-color: #ccc;
}

/* Classe pour la seconde ligne horizontale */
hr.petiteBarre {
  width: 10%;
  margin: 20px auto;
  border: 0;
  height: 1px;
  background-color: #ccc;
}

header {
  text-align: center;
}

nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin-left: 30%;
  margin-right: 30%;
  margin-bottom: 5%;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  border-radius: 15px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Style de base pour les liens */
a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 16px;
  display: block;
  margin: 2px 0;
  border: 2px solid transparent;
}

/*#########################
  animation des exercices
#########################*/

.svg-wrapper {
  position: relative;
  margin: 10px 0;
  width: 300px;
}
.shape1,
.shape2 {
  stroke-dasharray: 700;
  stroke-width: 5px;
  fill: transparent;
  stroke: #ffee00;
  transition: stroke-dashoffset 1s ease-in-out, stroke-dasharray 1s ease-in-out;
}
.shape1 {
  stroke-dashoffset: 700;
}
.shape2 {
  stroke-dashoffset: -700;
}

.svg-wrapper:hover .shape1,
.svg-wrapper:hover .shape2 {
  stroke-dashoffset: 0;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*pied de page*/
.maj {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgb(42, 42, 42);
  margin-bottom: auto;
  padding: 20px 0;
  color: white;
}