added pictures and logos

pages/_app.js

@@ -1,3 +1,10 @@
+import '../styles.css'
+import { Inter } from "next/font/google";
+const inter = Inter({ subsets: ["latin"] });
 export default function MyApp({ Component, pageProps }) {
-    return <Component {...pageProps} />
+    return (
+        <main className={inter.className}>
+            <Component {...pageProps} />
+        </main>
+    )
 }

pages/encryption.mdx

@@ -21,7 +21,7 @@ Yes, you read it correctly. The video is divided into 4 or 8-second chunks and o
 
 The advantage of subsample encryption is that encryption and decryption are extremely fast and consume a lot less CPU resources (around 10% of resources compared to encrypting an entire file).
 
-**INSERT graphics of subsample encryption here**
+![Subsample Encryption](/subsample-encryption.png)
 
 IV is [initialization vector](https://en.wikipedia.org/wiki/Initialization_vector) and it’s almost always openly shared when files are distributed. This means if anyone obtains the KEY 🔑, they can decrypt the media.
 

pages/key-exchange.mdx

@@ -32,7 +32,7 @@ The key server receives the encrypted payload and decrypts using its own private
 3. Encrypt the Key and other information about how to decode the media using the CDM’s public key provided.
 4. Send the encrypted payload back.
 
-** INSERT GRAPHIC EXPLAINING THIS**
+![Key Exchange Process](/key-exchange.png)
 
 Once CDM receives the response it was waiting for, it can just decrypt the payload using its own private key and retrieve the media Key 🔑. yay!
 

styles.css

@@ -0,0 +1,3 @@
+body {
+    font-size: 1.1rem;
+  }

theme.config.tsx

@@ -2,13 +2,47 @@ import React from 'react'
 import { DocsThemeConfig } from 'nextra-theme-docs'
 
 const config: DocsThemeConfig = {
-  logo: <span>Howdrm.works</span>,
+  color: {
+    hue: {
+      dark: 258,
+      light: 243,
+    },
+    saturation: {
+      dark: 90,
+      light: 75,
+    },
+    lightness: {
+      dark: 66,
+      light: 59
+    },
+
+  },
+  backgroundColor:{
+      dark: "000,000,000"
+  },
+  logo: (
+    <>
+      <img src="/round-logo-bg.svg" alt="Howdrm Logo" style={{ height: '1.5em' }} />
+      <span style={{ marginLeft: '.4em', fontWeight: 500 }}>
+        Howdrm.works
+      </span>
+    </>
+  ),
   project: {
     link: 'https://github.com/gumlet/howdrm.works',
   },
   docsRepositoryBase: 'https://github.com/gumlet/howdrm.works/blob/main',
   footer: {
-    content: 'Nextra Docs Template',
+    content: (
+      <>
+      <a href="https://nextra.site" target="_blank">
+      <img src='https://assets.gumlet.io/assets/logo.svg' alt='Gumlet Logo' style={{ height: '1.5em' }} />
+      </a>
+      <span>
+        ©{' '} {new Date().getFullYear()}
+      </span>
+      </>
+    ),
   },
   search: {
     placeholder: "Search Howdrm.works"