1 files changed, 85 insertions, 16 deletions

diff --git a/static/style.css b/static/style.css
index e31e6d1..adfbe85 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,16 +1,68 @@
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 300;
+  src: url("/static/fonts/OpenSans-Light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: regular;
+  src: url("/static/fonts/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: regular;
+  font-style: italic;
+  src: url("/static/fonts/OpenSans-RegularItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 700;
+  src: url("/static/fonts/OpenSans-SemiBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 700;
+  font-style: italic;
+  src: url("/static/fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 800;
+  src: url("/static/fonts/OpenSans-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 800;
+  font-style: italic;
+  src: url("/static/fonts/OpenSans-BoldItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 900;
+  src: url("/static/fonts/OpenSans-ExtraBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 900;
+  font-style: italic;
+  src: url("/static/fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
+}
+
 body {
   background: #ffffff;
   margin: 4rem;
-  font-family: sans, monospace, sans-serif;
+  font-family: "Open Sans", sans-serif, sans, monospace;
   line-height: 1.5;
 }
 
-@font-face {
-  font-family: "Bad Script";
-  src: local("Bad Script"),
-       url: ("/static/fonts/BadScript-Regular.ttf") format ("opentype");
-}
-
 * {
   box-sizing: border-box;
 }
@@ -33,7 +85,7 @@ nav a.active {
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem 2rem;
+  gap: 0.5rem 2rem;
 }
 
 .logo {
@@ -70,6 +122,11 @@ nav a.active {
 .logo img,
 .logo a {
   height: 95px;
+  width: 108.38px;
+}
+
+.logo h1 {
+  font-weight: 900;
 }
 
 h1,
@@ -80,7 +137,6 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-family: sans;
 }
 
 h1 {
@@ -117,7 +173,7 @@ h3 {
 .content h2 {
   font-size: 3.5rem;
   font-weight: 900;
-  line-height: 1.2;
+  line-height: 1;
 }
 
 p {
@@ -168,6 +224,15 @@ p {
   grid-row: 13 / span 4;
 }
 
+.gallery a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
 .gallery img,
 .gallery video {
   position: absolute;
@@ -176,6 +241,7 @@ p {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  z-index: 0;
 }
 
 .shop-items {
@@ -399,7 +465,7 @@ p {
 
 @media screen and (max-width: 50rem) {
   body {
-    margin: 2rem;
+    margin: 1rem 1rem 1.5rem;
   }
 
   .side {
@@ -410,14 +476,17 @@ p {
     font-size: 3rem;
   }
 
-  .container {
-    gap: 1rem;
-  }
-
   .gallery {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
+    max-width: 100%;
+  }
+
+  .gallery > div {
+    display: contents;
+    position: relative;
+    display: flex;
   }
 
   .gallery img,