devsite/app/assets/main.css

/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

.font-orbitron-24 {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  color: #333333;
}

.font-orbitron-16 {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  color: #333333;
}

.font-orbitron-12 {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 24px en gras */
.font-orbitron-24-bold {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 24px en italique */
.font-orbitron-24-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-style: italic;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 24px en gras et italique */
.font-orbitron-24-bold-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 16px en gras */
.font-orbitron-16-bold {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 16px en italique */
.font-orbitron-16-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-style: italic;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 16px en gras et italique */
.font-orbitron-16-bold-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 12px en gras */
.font-orbitron-12-bold {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 12px en italique */
.font-orbitron-12-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #333333;
}

/* Classe pour la police Orbitron avec taille 12px en gras et italique */
.font-orbitron-12-bold-italic {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  color: #333333;
}

/* Importation des styles de base, des composants et des utilitaires de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Classe pour définir l'image de fond */
.bg-wallpaper {
  background-image: url('./images/wallpapersite.png'); /* Chemin de l'image de fond */
  background-size: cover; /* L'image couvre toute la zone */
  background-position: center; /* L'image est centrée */
  background-repeat: no-repeat; /* L'image ne se répète pas */
}

/* Classe pour définir la hauteur minimale et maximale du contenu de la page d'accueil */
.homepage-content {
  min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de la fenêtre */
  max-height: 80vh; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
}

/* Classe pour animer le premier cercle */
.circle-one {
  animation: move1 10s linear infinite; /* Animation infinie avec une durée de 10s */
}

/* Classe pour animer le deuxième cercle */
.circle-two {
  animation: move2 10s linear infinite; /* Animation infinie avec une durée de 10s */
}

/* Définition de l'animation pour le premier cercle */
@keyframes move1 {
  0% {
    transform: translate(0, 0) scale(1); /* Position et échelle initiales */
  }
  25% {
    transform: translate(200px, 200px) scale(1); /* Déplacement et échelle */
  }
  50% {
    transform: translate(100px, 400px) scale(1.2); /* Déplacement et échelle */
  }
  75% {
    transform: translate(-100px, -200px) scale(1.1); /* Déplacement et échelle */
  }
  100% {
    transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
  }
}

/* Définition de l'animation pour le deuxième cercle */
@keyframes move2 {
  0% {
    transform: translate(0, 0) scale(1); /* Position et échelle initiales */
  }
  25% {
    transform: translate(-200px, -200px) scale(1); /* Déplacement et échelle */
  }
  50% {
    transform: translate(-100px, -400px) scale(1.2); /* Déplacement et échelle */
  }
  75% {
    transform: translate(100px, 200px) scale(1.1); /* Déplacement et échelle */
  }
  100% {
    transform: translate(0, 0) scale(1); /* Retour à la position et échelle initiales */
  }
}

/* Classe pour agrandir le conteneur */
.large-container {
  max-width: 72rem; /* Largeur maximale de 72rem */
  margin: 0 auto; /* Centrer horizontalement */
  padding: 1.5rem; /* Padding de 1.5rem */
}

/* Masquer la barre de défilement par défaut */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* WebKit (Chrome, Safari, Edge) */
}

/* Afficher la barre de défilement au survol */
.show-scrollbar:hover {
  scrollbar-width: auto; /* Firefox */
  -ms-overflow-style: auto; /* Internet Explorer 10+ */
}

.show-scrollbar:hover::-webkit-scrollbar {
  display: block; /* WebKit (Chrome, Safari, Edge) */
}