body {
  position: relative;
  width: 100vw; /* Largeur de la fenêtre de navigation */
  height: 100vh; /* Hauteur de la fenêtre de navigation */
  margin: 0;
  padding: 0;
   background-color: #34495e; /* Couleur de fond pour le corps */
}

h1 {
  color: white; /* Couleur du texte */
  text-align: center; /* Centrage du texte */
}

.outter_circle {
  position: absolute; /* Position absolue pour centrer l'élément */
  display: inline-block; /* Modifiez cette propriété pour inline-block */
  justify-content: center;
  width: 600px; /* Ancienne largeur + 100px */
  height: 600px; /* Ancienne hauteur + 100px */
  top: calc(50% - 300px); /* Réajustez la position verticale avec la nouvelle taille */
  left: calc(50% - 325px); /* Réajustez la position horizontale avec la nouvelle taille */
  border-radius: 50%; /* Bordures arrondies pour créer un cercle */
}

.medium_circle {
  position: absolute; /* Ajout de position absolue */
  display: flex;
  justify-content: center;
  top: calc(50%); /* Calcul de la position verticale */
  left: calc(50%); /* Calcul de la position horizontale */
  border-radius: 50%;
}

.note {
  position: absolute;
  margin-top: calc(50%);
  margin-left: calc(50%);
  width: calc(100% / 12); /* Largeur équivalente à 1/12 du conteneur */
  height: 28px; /* Ajustez la hauteur selon vos besoins */
  color: white;
  text-align: center;
  border-radius: 10%; /* Assure une forme circulaire */
}


/* Positionnement des notes outer  */
.note:nth-child(1) {
  transform: rotate(1deg) translateY(-160px);

}

.note:nth-child(2) {
  transform: rotate(31deg) translateY(-160px);
}

.note:nth-child(3) {
  transform: rotate(62deg) translateY(-160px);
}

.note:nth-child(4) {
  transform: rotate(92deg) translateY(-160px);
}

.note:nth-child(5) {
  transform: rotate(122deg) translateY(-160px);
}

.note:nth-child(6) {
  transform: rotate(152deg) translateY(-160px);
}

.note:nth-child(7) {
  transform: rotate(182deg) translateY(-160px);
}

.note:nth-child(8) {
  transform: rotate(212deg) translateY(-160px);
}

.note:nth-child(9) {
  transform: rotate(241deg) translateY(-160px);
}

.note:nth-child(10) {
  transform: rotate(271deg) translateY(-160px);
}

.note:nth-child(11) {
  transform: rotate(302deg) translateY(-160px);
}

.note:nth-child(12) {
  transform: rotate(332deg) translateY(-160px);
}


.note_medium {
  position: absolute;
  margin-top: calc(50%);
  margin-left: calc(50%);
  width: 40px;
  height: 24px;

  color: white;
  text-align: center;
}


/* Positionnement des notes medium  */
.note_medium:nth-child(1) {
  transform: rotate(0deg) translateY(-125px);

}

.note_medium:nth-child(2) {
  transform: rotate(30deg) translateY(-125px);
}

.note_medium:nth-child(3) {
  transform: rotate(60deg) translateY(-125px);
}

.note_medium:nth-child(4) {
  transform: rotate(90deg) translateY(-125px);
}

.note_medium:nth-child(5) {
  transform: rotate(120deg) translateY(-125px);
}

.note_medium:nth-child(6) {
  transform: rotate(150deg) translateY(-125px);
}

.note_medium:nth-child(7) {
  transform: rotate(180deg) translateY(-125px);
}

.note_medium:nth-child(8) {
  transform: rotate(210deg) translateY(-125px);
}

.note_medium:nth-child(9) {
  transform: rotate(240deg) translateY(-125px);
}

.note_medium:nth-child(10) {
  transform: rotate(270deg) translateY(-125px);
}

.note_medium:nth-child(11) {
  transform: rotate(300deg) translateY(-125px);
}

.note_medium:nth-child(12) {
  transform: rotate(330deg) translateY(-125px);
}



.inner_circle {
  position: absolute;
  display: inline-block;
  justify-content: center;
  
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 120px);
  border-radius: 50%;
}

.note_inner {
  position: absolute;
  margin-top: calc(50%);
  margin-left: calc(50%);
  width: 40px;
  height: 24px;
  color: white;
  text-align: center;
}

/* Positionnement des notes medium  */
.note_inner:nth-child(1) {
  transform: rotate(0deg) translateY(-90px);

}

.note_inner:nth-child(2) {
  transform: rotate(30deg) translateY(-90px);
}

.note_inner:nth-child(3) {
  transform: rotate(60deg) translateY(-90px);
}

.note_inner:nth-child(4) {
  transform: rotate(90deg) translateY(-90px);
}

.note_inner:nth-child(5) {
  transform: rotate(120deg) translateY(-90px);
}

.note_inner:nth-child(6) {
  transform: rotate(150deg) translateY(-90px);
}

.note_inner:nth-child(7) {
  transform: rotate(180deg) translateY(-90px);
}

.note_inner:nth-child(8) {
  transform: rotate(210deg) translateY(-90px);
}

.note_inner:nth-child(9) {
  transform: rotate(240deg) translateY(-90px);
}

.note_inner:nth-child(10) {
  transform: rotate(270deg) translateY(-90px);
}

.note_inner:nth-child(11) {
  transform: rotate(300deg) translateY(-90px);
}

.note_inner:nth-child(12) {
  transform: rotate(330deg) translateY(-90px);
}


button {
  position: absolute;
  width: 40px; /* Taille du bouton */
  height: 20px; /* Taille du bouton */
  border: none;
  border-radius: 25%; /* Rend le bouton circulaire */
  background-color: #007BFF; /* Couleur de fond bleue */
  color: white; /* Couleur du texte */
  font-size: 16px; /* Taille du texte */
  cursor: pointer; /* Change le curseur en main */
  
  /* Centrage du texte */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Ombre douce pour un effet 3D léger */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; /* Transition douce pour hover */
}




button:hover {
  background-color: #0056b3; /* Couleur plus foncée au survol */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée pour l'effet au survol */
  transform: translateY(-2px); /* Léger effet de "soulèvement" */
}

.note.C button {
  background-color: #FFD700; /* Exemple de couleur pour C */
}

.note.D button {
  background-color: #afceaf; /* Exemple de couleur pour D */
}

.note.E button {
  background-color: #ADD8E6; /* Exemple de couleur pour E */
}

.note.R button {
  background-color: #ADD8E6; /* Exemple de couleur pour E */
}

.note.F button {
  background-color: #FFBF00; /* Exemple de couleur pour F */
}

.note.G button {
  background-color: #c0e677; /* Exemple de couleur pour G */
}

.note.A button {
  background-color: #8bbeaf; /* Exemple de couleur pour A */
}

.note.B button {
  background-color: #9370DB; /* Exemple de couleur pour B */
}

.note.Fd button {
  background-color: #DDBBFF; /* Exemple de couleur pour F# */
}

.note.Cd button {
  background-color: #FFB6C1; /* Exemple de couleur pour C# */
}

.note.Gd button {
  background-color: #FFBBDD; /* Exemple de couleur pour G# */
}

.note.Dd button {
  background-color: #FF69B4; /* Exemple de couleur pour D# */
}

.note.Ad button {
  background-color: #FF8C00; /* Exemple de couleur pour A# */
}

.note_medium.A button {
  background-color: #FFD700; /* Couleur pour Am */
}

.note_medium.R button {
  background-color: #c0e677; /* Couleur pour Em */
}

.note_medium.B button {
  background-color: #afceaf; /* Couleur pour Bm */
}

.note_medium.Fd button {
  background-color: #8bbeaf; /* Couleur pour F#m */
}

.note_medium.Cd button {
  background-color: #ADD8E6; /* Couleur pour C#m */
}

.note_medium.Gd button {
  background-color: #9370DB; /* Couleur pour G#m */
}

.note_medium.Dd button {
  background-color: #DDBBFF; /* Couleur pour D#m */
}

.note_medium.Bb button {
  background-color: #FFB6C1; /* Couleur pour Bbm */
}

.note_medium.F button {
  background-color: #FFBBDD; /* Couleur pour Fm */
}

.note_medium.C button {
  background-color: #FF69B4; /* Couleur pour Cm */
}

.note_medium.G button {
  background-color: #FF8C00; /* Couleur pour Gm */
}

.note_medium.D button {
  background-color: #FFBF00; /* Couleur pour Dm */
}

.note_inner.B button {
  background-color: #FFD700; /* Couleur pour B */
}

.note_inner.Fd button {
  background-color: #c0e677; /* Couleur pour F# */
}

.note_inner.Cd button {
  background-color: #afceaf; /* Couleur pour C# */
}

.note_inner.Gd button {
  background-color: #8bbeaf; /* Couleur pour G# */
}

.note_inner.Dd button {
  background-color: #ADD8E6; /* Couleur pour D# */
}

.note_inner.Bb button {
  background-color: #9370DB; /* Couleur pour Bb */
}

.note_inner.F button {
  background-color: #DDBBFF; /* Couleur pour F */
}

.note_inner.C button {
  background-color: #FFB6C1; /* Couleur pour C */
}

.note_inner.G button {
  background-color: #FFBBDD; /* Couleur pour G */
}

.note_inner.D button {
  background-color: #FF69B4; /* Couleur pour D */
}

.note_inner.A button {
  background-color: #FF8C00; /* Couleur pour A */
}

.note_inner.E button {
  background-color: #FFBF00; /* Couleur pour E */
}

.switch {
    position: absolute;
    top: 45px; /* Ajustez la valeur selon votre préférence */
    right: 25px; /* Ajustez la valeur selon votre préférence */
    width: 80px;
    height: 40px;
    border-radius: 2%; /* Assure une forme circulaire */
    
}
.switch:hover {
    background-color: #45a049;
}