devsite/app/assets/main.css

@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');

@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-wallpaper {
  background-image: url('./images/wallpapersite.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.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 */
}

.circle-one {
  animation: move1 10s linear infinite;
}

.circle-two {
    animation: move2 10s linear infinite;
  }

@keyframes move1 {
  0% {
    transform: translate(0, 0) scale 1;
  }
  25% {
    transform: translate(200px, 200px) scale(1);
  }
  50%{
    transform: translate(100px, 400px) scale(1.2);
  }
  75%{
    transform: translate(-100px, -200px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes move2 {
    0% {
      transform: translate(0, 0) scale 1;
    }
    25% {
      transform: translate(-30px, -300px) scale(1);
    }
    50%{
      transform: translate(-200px, -100px) scale(1.2);
    }
    75%{
      transform: translate(30px, 70px) scale(1.1);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }