Fix responsive

frontend/static/style.css

@@ -23,6 +23,8 @@ h1,h2 {
     margin: 0;
     text-align: center;
     color: black;
+    position: relative; /* Assurez-vous que le titre est positionné relativement */
+    z-index: 1; /* Placez le titre au-dessus de l'arrière-plan flou */
 }
 
 h1 {
@@ -151,3 +153,26 @@ h1 {
     font-weight: bold;
 }
 
+/* Media query pour les écrans de petite taille */
+@media (max-width: 768px) {
+    .background {
+        overflow-y: auto; /* Permettre le défilement vertical */
+    }
+
+    .grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px; /* Ajustez l'espacement entre les éléments si nécessaire */
+    }
+
+    .box {
+        flex: 1 1 100px; /* Ajustez la taille des boîtes pour qu'elles s'adaptent à l'écran */
+        max-width: 100px; /* Assurez-vous que les boîtes ne dépassent pas 100px de largeur */
+        height: 100px; /* Assurez-vous que les boîtes gardent une hauteur de 100px */
+    }
+
+    h1 {
+        margin-top: 5em;
+    }
+}