update

assets/css/main.css

@@ -41,6 +41,21 @@
   --pagefind-ui-image-box-ratio: 3 / 2;
   --pagefind-ui-font: openSansRegular;
 }
+.image-container {
+  width: 300px;
+  height: 300px;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start; /* Top align vertically */
+  justify-content: center; /* Center horizontally */
+  background-color: #f8f8f8; /* Optional: for empty space */
+}
+
+.image-container img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
 
 html {
   font-size: 62.5%;
@@ -271,7 +286,7 @@ nav {
   right: 2%;
   z-index: 100;
   border: none;
-  background-color: red;
+  background-color: orange;
   color: var(--text-color);
   cursor: pointer;
   padding: 1rem;
@@ -288,7 +303,7 @@ dialog {
     color: var(--text-color);
     border: none;
     outline: none;
-    background-color: red;
+    background-color: orange;
   }
 }
 
@@ -311,7 +326,7 @@ main {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background: var(--orage) url("/images/banner.webp");
+  background: url("/images/banner.webp");
   background-blend-mode: multiply;
   background-size: cover;
   background-position: center center;
@@ -349,10 +364,10 @@ main {
   background-color: var(--blue-2);
   cursor: pointer;
   transition: color 0.2s ease-in;
+  outline: 10px solid #ffffff;
 
   &:hover {
     background-color: var(--white);
-    outline: 0.2rem solid var(--blue-2);
     color: var(--blue-2);
   }
 }
@@ -903,3 +918,4 @@ footer {
     --size: 20rem;
   }
 }
+