diff --git a/public/css/index.css b/public/css/index.css
index 3f52d99..2ecb594 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -38,6 +38,7 @@ body {
   text-align: center;
   
   display: flex;
+  flex-direction: column;
   place-items: center;
   
   padding: 1rem;
@@ -76,7 +77,6 @@ h2 {
 }
 
 main {
-  max-width: 1280px;
   width:100%;
   margin: 0 auto;
 }
@@ -158,18 +158,34 @@ main input:hover, main input:focus-visible {
   .cols {
     grid-template-columns: 1fr 1fr 1fr;
   }
-}
-
-@media (min-width: 800px) {
-  .cols {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+  main {
+    max-width: 800px;
   }
 }
 
 @media (min-width: 1024px) {
+  .cols {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  main {
+    max-width: 1000px;
+  }
+
+  .mascotte {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+  }
+}
+
+@media (min-width: 1500px) {
   .cols {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
+
+  main {
+    max-width: 1280px;
+  }
 }
 
 .linklist {
@@ -179,6 +195,7 @@ main input:hover, main input:focus-visible {
   border-radius:6px;
   padding:0.66rem;
   text-align:left;
+  z-index: 1;
 }
 
 .linklist a {
@@ -197,12 +214,6 @@ main input:hover, main input:focus-visible {
   text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
 }
 
-.mascotte {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-}
-
 .mascotte > div {
   position: relative;
 }
@@ -212,6 +223,7 @@ main input:hover, main input:focus-visible {
   height: auto;
   filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.6));
   margin: 20px;
+  z-index: 0;
 }
 
 .mascotte:hover .mascotte-message {