added blank pages

style.css

@@ -4,6 +4,7 @@
 body {
     background-color: var(--surface);
     font-family: 'Plus Jakarta Sans', sans-serif;
+    box-sizing: border-box;
 }
 
 nav {
@@ -23,9 +24,12 @@ nav > div {
     /* content inside */
     display: grid;
     grid-template-columns: 1fr auto 1fr;
-	align-items: center;
+    align-items: center;
+
+    & :last-child {
+        justify-self: end
+    }
 
-    & :last-child { justify-self: end }
     & > div {
         display: flex;
         align-items: center;
@@ -39,12 +43,14 @@ nav > div {
             &[href] {
                 font-weight: 200;
                 transition: color 0.2s;
+
                 &:hover {
                     color: var(--primary);
                 }
             }
 
             /* The main selected link doesn't have a href attribute, so we can use that for styles */
+
             &:not([href]) {
                 color: var(--primary);
                 padding-bottom: 8px;
@@ -62,7 +68,7 @@ nav > div {
     align-items: center;
     justify-content: center;
 
-    & > div{
+    & > div {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
@@ -73,6 +79,7 @@ nav > div {
         }
 
         /* left portion */
+
         & > :first-child {
             align-items: flex-start;
             flex-direction: column;
@@ -80,8 +87,10 @@ nav > div {
         }
 
         /* right portion */
+
         & > :last-child {
             align-items: center;
+
             & > img {
                 rotate: 2deg;
                 border-radius: var(--border-radius);
@@ -100,6 +109,7 @@ nav > div {
 
 .about-us {
     background-color: var(--surface-container-low);
+    max-height: calc(100vh - var(--nav-height) - 2rem);
 
     & > div {
         max-width: var(--max-content-width);
@@ -107,14 +117,41 @@ nav > div {
         padding: 2rem;
 
         display: grid;
-        grid-template-columns: 2fr 1fr;
+        grid-template-columns: 60% 40%;
         align-items: center;
-        gap: 1rem;
 
-        & > div {
+        & :first-child {
+            display: flex;
+            align-items: center;
+            align-content: center;
+
+            & > img {
+                border-radius: var(--border-radius);
+                border: 0.5rem solid var(--surface);
+                scale: 0.8;
+                height: 100%;
+                width: 100%;
+                position: relative;
+
+                &:first-child {
+                    scale: 1;
+                    top: -2rem;
+                }
+
+                &:last-child {
+                    top: 1rem;
+                    left: -7rem;
+                    z-index: 10;
+                }
+
+            }
+        }
+
+        &:last-child {
             & > span {
                 color: var(--primary);
             }
+
             gap: 1rem;
         }
     }