Centred and added border to architecture diagram.

2 files changed, 20 insertions, 3 deletions

diff --git a/common/main.css b/common/main.css
index ba326cf..bbf627b 100644
--- a/common/main.css
+++ b/common/main.css
@@ -47,7 +47,8 @@ html {
 }
 
 body {
-    background-color: #ddd;
+    /* background-color: #ddd; */
+    background-color: #f5f5f5;
 }
 
 a {
@@ -81,7 +82,7 @@ h2 {
     padding-top: 128px;
 
     background-color: #f5f5f5;
-    border: 2px solid #c8c8c8;
+    /* border: 2px solid #c8c8c8; */
     display: flex;
     flex-direction: column;
 
@@ -317,6 +318,22 @@ li {
     margin-left: 32px;
 }
 
+.architecture-image-container {
+    margin-top: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.architecture-image-container img {
+    border: 2px solid #c8c8c8;
+    transition: 0.125s;
+}
+
+.architecture-image-container:hover img {
+    border: 2px solid #828282;
+}
+
 #social {
     width: fit-content;
     height: fit-content;
diff --git a/index.html b/index.html
index 10903c6..75284fe 100644
--- a/index.html
+++ b/index.html
@@ -229,7 +229,7 @@
                 <h2 id="architecture"><a class="anchor-link" href="#architecture"></a>raylib architecture</h2>
                 <br>
                 <p>raylib is a highly modular library. Everything is contained within a small number of well defined, specific and self-contained modules, named accordingly to its primary functionality. Note that some of those modules can be used in <strong>standalone mode</strong>, independently of raylib library.</p>
-                <a href="images/raylib_architecture_v4.2.png"><img src="images/raylib_architecture_v4.2.png" title="raylib architecture" alt="raylib architecture" width="800" /></a>
+                <a class="architecture-image-container" href="images/raylib_architecture_v4.2.png"><img src="images/raylib_architecture_v4.2.png" title="raylib architecture" alt="raylib architecture" width="800" /></a>
                 <br>
             </div>