:root {
  --background-color: #222222;
  --sidebar-color: #0c0c0c;
  --text-color : #dadada;
  --primary-color: #EF6510;
  --secondary-color: #00D3DC;
  --tertiary-color: #00D3DC;
  --quaternary-color: #0c0c0c;
  --quinary-color: #00D3DC;
  --senary-color: #00D3DC;
  --septenary-color: #ffffff;
  --octonary-color: #00D3DC;
  --nonary-color: #00D3DC;
  --denary-color: #00D3DC;
  --discord-color: #515de8;
  --telegram-color: #1187C2;
  --linkedin-color: #0A66C2;
  --twitch-color: #a970ff;
  --youtube-color: #ff0000;
}

.rotating {
  display: inline-block;
  animation: rotate 5s linear infinite; /* Ajustez la durée (2s) et le style (linear) */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* CSS pour l'image responsive */
.responsive-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 600px; /* Ajouter une hauteur maximale pour s'assurer que l'image ne devienne pas trop grande */
}

/* CSS pour rendre le texte et la section responsive */
#header_omuna {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 600px) {
  .responsive-logo {
      max-height: 600px; /* Réduire encore la hauteur maximale pour les petits écrans si nécessaire */
  }
}

/* lien des réseaux */
.omuna_link {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin-top: 20px; /* Espacement en haut */
  margin-bottom: 20px; /* Espacement en bas */
}

.omuna_link .col-4 {
  flex: 1;
  padding: 0 10px; /* Espacement intérieur */
}

.omuna_link a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 16px; /* Taille de base pour le texte */
  line-height: 1.2; /* Espacement entre les lignes */
}

.omuna_link .icon {
  font-size: 80px; /* Taille des icônes */
  margin-bottom: 10px; /* Espacement sous les icônes */
}

.omuna_link a:hover {
  opacity: 0.8; /* Opacité au survol */
}

/* Média query pour ajuster la mise en page sur les petits écrans */
@media (max-width: 768px) {
  .omuna_link {
      flex-wrap: wrap;
  }
  .omuna_link .col-4 {
      flex: 0 0 100%; /* Sur une seule colonne */
      margin-bottom: 10px; /* Espacement entre les éléments */
  }
  .omuna_link .icon {
      font-size: 60px; /* Taille réduite des icônes pour les petits écrans */
  }
}