diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 5539334..2d16366 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,15 +4,39 @@
         {{partial "head" .}}
     </head>
     <body>
-        {{partial "header" .}}<hr>
-        <main>{{.Content}}</main>
-        <aside>
-            <ul>
-                {{range .Pages}}
-                <li><a href="{{.Permalink}}">{{.Title}}</a></li>
+        {{partial "header" .}}
+        <main>
+            <section>
+                {{ if .Content}}
+                <article>
+                    {{.Content}}
+                </article>
                 {{end}}
-            </ul></aside>
-    </body>
-    <hr>
+                {{ if .Pages }}
+                <article>
+                    {{range .Pages}}
+                <section class="listing">
+                    <div>
+                        {{ if .Params.video}}
+                        <video autoplay muted>
+                            <source src="{{.Params.video}}">
+                        </video>
+                    {{else}}
+                    <a href="{{.Permalink}}">
+                        <img src="{{.Params.image}}">
+                    </a>
+                    {{end}}
+                    </div>
+                    <div>
+                    <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
+                    <p>{{.Params.description}}</p>
+                    </div>
+                </section>
+                {{end}}
+                </article>
+                {{end}}
+            </main>
+
     {{partial "footer" .}}
+    </body>
 </html>
\ No newline at end of file
diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml
index fb893ab..79096cd 100644
--- a/layouts/_default/rss.xml
+++ b/layouts/_default/rss.xml
@@ -17,7 +17,7 @@
 		{{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
 		<guid>{{ .Permalink }}</guid>
         <itunes:image href="{{.Params.image}}"/>
-        <enclosure url="{{.Params.videoURL}}" />
+        <enclosure url="{{.Params.video}}" />
 		<description>{{- .Content | html -}}</description>
 	</item>
 	{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4cfb656..a5482f1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,9 +4,19 @@
         {{partial "head" .}}
     </head>
     <body>
-        {{partial "header" .}}<hr>
-        <main>{{.Content}}</main>
+        {{partial "header" .}}
+        <main>
+            <article>
+                <section>
+                    {{.Content}}
+                </section>
+                {{ if .Params.author}}
+                <section>
+                    {{partial "metadata" .}}
+                </section>
+                {{end}}
+            </article>
+        </main>
+        {{partial "footer" .}}
     </body>
-    <hr>
-    {{partial "footer" .}}
 </html>
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index fe0077f..3a1cf64 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,10 +4,34 @@
         {{partial "head" .}}
     </head>
     <body>
-        {{partial "header" .}}<hr>
-        <main>{{.Content}}</main>
-        <aside>{{partial "sidebar" .}}</aside>
+        {{partial "header" .}}
+        <main>
+            <section>
+                <article>
+                    {{.Content}}
+                </article>
+                {{ if .Site.Data.details.social_links}}
+                <hr>
+                <article>
+                    <h2>Stay up to date</h2>
+                   <div id="social-links">
+                    {{range .Site.Data.details.social_links}}
+                    <div class="social-link">
+                        <a href="{{.href}}">
+                            <img src="{{.img}}">
+                        </a>
+                        <a href="{{.href}}"><strong>{{.title}}</strong></a>
+                    </div>
+                    {{end}}
+                   </div>
+
+                </article>
+                {{end}}
+            </section>
+            <article id="sidebar">
+            {{partial "sidebar" .}}
+            </article>
+        </main>
+        {{ partial "footer" .}}
     </body>
-    <hr>
-    {{partial "footer" .}}
 </html>
\ No newline at end of file
diff --git a/layouts/interverse/list.html b/layouts/interverse/list.html
new file mode 100644
index 0000000..99d9e7a
--- /dev/null
+++ b/layouts/interverse/list.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    {{partial "head" .}}
+    <script defer src="/alpine.js" type="text/javascript"></script>
+    <script src="/helper.js"></script>
+    <style>
+        .interverse {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .interverse h1 {
+            text-align: center;
+        }
+
+        .interverse img {
+            max-width: 15rem;
+            max-height: 15rem;
+        }
+
+        .interverse section {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            box-shadow: none;
+        }
+
+        .interverse-connection-preview {
+            display: flex;
+            flex-direction: column;
+            padding: 1rem;
+            margin: 0.5rem;
+            align-items: center;
+        }
+
+        .interverse-connection {
+            margin: 0.25rem;
+            padding: 0.25rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-items: center;
+        }
+
+        .interverse-resource {
+            margin: 2rem;
+        }
+
+        #interverse-resource-groups {
+            align-items: flex-start;
+        }
+    </style>
+</head>
+
+<body>
+    {{partial "header" .}}
+    <main class="interverse" x-data x-if="Alpine.store('data')">
+        <section>{{.Content}}</section>
+        <section id="interverse-details">
+            <img x-bind:src="Alpine.store('data')['image']">
+            <div style="margin-left:3rem;">
+                <h1 x-text="Alpine.store('data')['name']"></h1>
+                <a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a>
+            </div>
+        </section>
+        <section id="interverse-resource-groups">
+            <template x-for="(group,name) in Alpine.store('data')['resource_groups']">
+                <div>
+                    <h1 x-text="name"></h1>
+                    <div class="interverse-group">
+                        <template x-for="resource in group">
+                            <a x-bind:href="resource['location']">
+                                <div class="interverse-resource">
+                                    <template x-if="resource['icon'] !=''">
+                                        <img class="interverse-resource-icon" x-bind:src="resource['icon']">
+                                    </template>
+                                    <h2 x-text="resource['label']"></h2>
+                                    <p x-text="resource['description']"></p>
+                                </div>
+                            </a>
+                        </template>
+                    </div>
+                </div>
+            </template>
+        </section>
+        <section id="interverse-resources">
+            <template x-for="resource in Alpine.store('data')['resources']">
+                <a x-bind:href="resource['location']">
+                    <div class="interverse-resource">
+                        <template x-if="resource['icon'] !=''">
+                            <img class="interverse-resource-icon" x-bind:src="resource['icon']">
+                        </template>
+                        <h2 x-text="resource['label']"></h2>
+                        <p x-text="resource['description']"></p>
+                    </div>
+                </a>
+            </template>
+        </section>
+        <div id="interverse-groups">
+            <template x-for="(group,name) in Alpine.store('data')['connection_groups']">
+                <div>
+                    <h1 x-text="name"></h1>
+                    <section class="interverse-group">
+                        <template x-for="link in group">
+                            <div class="interverse-connection" x-data="{connected:false">
+                                <template x-if="Alpine.store(link)['name'] !=''">
+                                    <div class='interverse-connection-preview'
+                                        x-on:click="initialize(link+'/.well-known/interverse')">
+                                        <h3 x-text="Alpine.store(link)['name']"></h3>
+                                        <img x-bind:src="Alpine.store(link)['image']">
+                                        <a x-bind:href="link" x-text="link"></a>
+                                    </div>
+                                </template>
+                                <template x-if="Alpine.store(link) == undefined">
+                                    <div>
+                                        <a x-bind:href="link">
+                                            <p x-text="link"></p>
+                                        </a>
+                                    </div>
+
+                                </template>
+                            </div>
+                        </template>
+                    </section>
+
+                </div>
+            </template>
+        </div>
+        <h3 style="text-align:center"></h3>
+        <section id="interverse-connections">
+            <template x-for="connection in Alpine.store('data')['connections']">
+                <div class="interverse-connection">
+                    <template x-if="Alpine.store(connection)['version'] >=0">
+                        <div x-on:click="initialize(connection+'/.well-known/interverse')">
+                            <h3 x-text="Alpine.store(connection)['name']"></h3>
+                            <template x-if="Alpine.store(connection)['image']!=''">
+                                <img x-bind:src="Alpine.store(connection)['image']">
+                            </template>
+                        </div>
+
+                    </template>
+                    <template x-if="name == ''">
+                        <div>
+                            <a x-bind:href="connection" x-text="connection"></a>
+                    </template>
+
+                </div>
+            </template>
+            </div>
+            <div id="interverse-contact">
+                <template x-for="contact in Alpine.store('data')['contact']">
+                    <div class="interverse-contact">
+
+                    </div>
+
+                </template>
+            </div>
+
+    </main>
+    <script>
+        var t = new Date();
+        var timestamp = t.getTime();
+        var main_url = "/.well-known/interverse";
+        if (getUrlParameter('s') && getUrlParameter("url")) {
+            var uri = "";
+            main_url = getUrlParameter('s') + "://" + getUrlParameter("url") + '/.well-known/interverse?t=' + timestamp;
+        } else {
+            if (getUrlParameter('url')) {
+                main_url = "https://" + getUrlParameter('url') + '/.well-known/interverse?t=' + timestamp;
+            }
+        }
+        document.addEventListener('alpine:init', function () {
+
+            initialize(main_url);
+        });
+
+        function initialize(url) {
+            Alpine.store("data", {});
+            fetchdata(url, function (e) {
+                data = JSON.parse(e.target.response);
+                raw_data = JSON.parse(e.target.response);
+                Alpine.store("data", data);
+                var connections = raw_data['connections'];
+                for (group in data['connection_groups']) {
+                    for (link in data['connection_groups'][group]) {
+                        connections.push(data['connection_groups'][group][link]);
+                    }
+                }
+                var t = new Date();
+                var timestamp = t.getTime();
+                for (var i = 0; i < connections.length; i++) {
+                    fetchdata(connections[i] + '/.well-known/interverse?t=' + timestamp, function (e) {
+                        try {
+                            dat = JSON.parse(e.target.response);
+                            console.log(dat);
+                            Alpine.store(dat['location'], dat);
+                        } catch {
+                            console.log("Failed to parse connection JSON");
+                        }
+                    });
+                }
+
+            });
+        }
+    </script>
+</body>
+{{partial "footer" .}}
+
+</html>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f3afd56..4af0054 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
 <footer>
-    <p><a href="">Freedom</a> created by <a href="https://gabe.rocks">Gabriel</a></p>
+    <p><a href="https://codeberg.org/gabe/Freedom">Freedom</a> created by <a href="https://gabe.rocks">Gabriel</a></p>
 </footer>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fb9cbaa..c4f110c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,3 +1,39 @@
+<title>{{ .Title}}</title>
 <link rel="stylesheet" href="/css/theme.css">
-<link rel="stylesheet" href="/style.css">
-<title>{{.Title}}</title>
\ No newline at end of file
+<meta charset="utf-8" />
+<meta name="title" content="{{ .Title }}">
+<meta name="description" content="{{.Params.description}}">
+<meta name="og:site_name" content="Libre Solutions Network">
+<meta property="og:title" content="{{ .Title }}">
+<meta property="og:description" content="{{.Params.description}}">
+<meta property="og:url" content="{{.Permalink}}">
+{{if .Params.video}}
+<meta name="twitter:card" content="player"/>
+<meta property="og:video" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
+<meta property="og:video:url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
+<meta property="og:video:secure_url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
+<meta property="og:type" content="video">	
+<meta name="twitter:player:width" content="480" />
+<meta name="twitter:player:height" content="360" />
+<meta property="twitter:player" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
+{{else}}
+{{if .Params.peertubeURL}}
+<meta property="og:video" content="{{.Params.peertubeURL}}">
+{{else}}
+{{if .Params.audioURL}}
+<meta property="og:audio" content="https://libresolutions.network/media/{{.Params.audioURL}}">
+<meta property="og:type" content="audio">
+{{else}}
+<meta property="og:type" content="website">
+<meta property="twitter:card" content="summary_large_image">
+{{end}}
+{{end}}
+{{end}}
+{{ if .Params.image }}
+<meta property="og:image" content="https://libresolutions.network/media/{{.Params.image}}">
+<meta property="twitter:image" content="https://libresolutions.network/media/{{.Params.image}}">
+{{else}}
+<meta property="og:image" content="https://libresolutions.network/logo.png">
+<meta property="twitter:image" content="https://libresolutions.network/logo.png">
+{{end}}
+
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4686be9..0dbb12b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,9 +1,14 @@
 <header>
-    <h1>{{.Site.Title }}</h1>
+    <img src="{{.Site.Data.details.logo}}">
+    <div>
+    <h1>{{.Site.Data.details.name }}</h1>
+    <i>{{.Site.Data.details.description}}</i>
+    </div>
     <nav>
-        <a href="/"><h3>Home</h3></a>
+        <a href="/"><h2>Home</h2></a>
         {{ range .Site.Sections}}
-        <a href="{{.Permalink}}"><h3>{{.Title}}</h3></a>
+        <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
         {{end}}
     </nav>
+    
 </header>
\ No newline at end of file
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
new file mode 100644
index 0000000..7c4139e
--- /dev/null
+++ b/layouts/partials/metadata.html
@@ -0,0 +1,15 @@
+<div class="metadata">
+        <div>
+            {{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
+            <h2>{{$author.name}}</h2>
+            <p>Date: {{.Date | time.Format "Jan 02 2006"}}</p>
+        </div>
+        <h4>Tags:</h4>
+        <ul>
+            {{ range (.GetTerms "tags")}}
+            <a href="{{.Permalink}}"><li>{{.LinkTitle}}</li></a>
+            {{end}}
+        </ul>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 7ced6d5..b7a9557 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,5 +1,30 @@
-<h3>Sidebar</h3>
 
-<h4>Recent Content</h4>
+{{if .Site.Data.details.featured}}
+<h2>Featured</h2>
+{{ range .Site.Data.details.featured}}
+<section class="featured">
+        <a href="{{.href}}">
+            <img src="{{.img}}">
+        </a>
+        <div>
+            <a href="{{.href}}">
+                <h3>{{.title}}</h3>
+            </a>
+            <p>{{.description}}</p>
+        </div>
+</section>
+{{end}}
+{{end}}
+<h2>Recent Content</h2>
+{{range first 5 .Site.RegularPages}}
 
-<h4>Featured</h4>
+<section class="recent">
+    <a href="{{.Permalink}}">
+        <img src="{{.Params.image}}">
+    </a>
+    <div>
+    <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
+    <p>{{.Params.description}}</p>
+    </div>
+</section>
+{{end}}
diff --git a/layouts/rss.xml b/layouts/rss.xml
new file mode 100644
index 0000000..f575599
--- /dev/null
+++ b/layouts/rss.xml
@@ -0,0 +1,30 @@
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+	<title>{{ .Title }}</title>
+	<link>{{ .Permalink }}</link>
+	<description>{{.Params.description}}</description>
+    <image href="{{.Site.Params.image}}"/>
+	<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+	<language>{{.}}</language>{{end}}
+	{{ with .OutputFormats.Get "RSS" }}
+        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+	{{ end }}
+	{{ range first 15 .Site.RegularPages }}
+	<item>
+		<title>{{ .Title }}</title>
+		<link>{{ .Permalink }}</link>
+		<pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+		{{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+		<guid>{{ .Permalink }}</guid>
+        <image>{{.Params.image}}</image>
+        {{ if .Params.audio }}
+        <enclosure url="{{.Params.audio}}" />
+        {{end}}
+        {{ if .Params.video}}
+        <enclosure url="{{.Params.video}}" />
+        {{end}}
+		<description>{{- .Content | html -}}</description>
+	</item>
+	{{ end }}
+	</channel>
+</rss>
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
index 359cd25..0944f88 100644
--- a/layouts/shortcodes/audio.html
+++ b/layouts/shortcodes/audio.html
@@ -1,3 +1,3 @@
 <audio>
-    <source src='{{.Get 0 }}'>
+    <source src='{{.Get "src" }}'>
 </audio>
\ No newline at end of file
diff --git a/layouts/shortcodes/embed.html b/layouts/shortcodes/embed.html
index 29d1e04..e7b4476 100644
--- a/layouts/shortcodes/embed.html
+++ b/layouts/shortcodes/embed.html
@@ -1,2 +1,2 @@
-<iframe src='{{.Get 0 }}'>
+<iframe src='{{.Get "src" }}'>
 </iframe>
\ No newline at end of file
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
new file mode 100644
index 0000000..60c0c88
--- /dev/null
+++ b/layouts/shortcodes/image.html
@@ -0,0 +1,14 @@
+{{ if .Get "href"}}
+<a href='{{.Get "href"}}'>
+{{end}}
+<img 
+src='{{.Get "src"}}' 
+{{if .Get "alt"}}
+ alt='{{.Get "alt"}}'
+{{end}} 
+{{if .Get "float"}}
+style='float:{{.Get "float"}}'
+{{end}}>
+{{ if .Get "href"}}
+</a>
+{{end}}
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
index 9bdfe0b..ebd091b 100644
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@@ -1,3 +1,3 @@
 <video controls>
-    <source src='{{.Get 0 }}'>
+    <source src='{{.Get "src" }}'>
 </video>
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 170bd12..594317a 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1,55 +1,352 @@
-body{
-    --theme-primary-color:black;
-    --theme-secondary-color:white;
-    --theme-accent-color:gold;
-    background-color: var(--theme-primary-color);
-    color:var(--theme-secondary-color);
-    width:100vw;
-    margin:0;
-    display:flex;
+body {
+    line-height: 1.25;
+    --theme-color-primary: black;
+    --theme-color-secondary: white;
+    --theme-color-accent: #1d7fd4;
+    --theme-color-accent-transparent: #1d7fd444;
+    --theme-color-accent2: #ebb716;
+    --theme-color-accent2-transparent: #ebb71644;
+    width: 100vw;
+    margin: 0px;
+    padding: 0px;
+    overflow-x: hidden;
+    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    color: var(--theme-color-secondary);
+    background-color: var(--theme-color-primary);
+}
+
+.background-photo {
+    position: fixed;
+    top: 40vh;
+    max-width: 80vw;
+    max-height: 70vh;
+    z-index: -1;
+}
+header{
+    margin-top:1rem;
+}
+
+header,footer{
+    text-align: center;
+    width:100vw;
+}
+footer{
+    margin-bottom:0;
+}
+nav{
+    background-color:rgba(0,0,0,0.7);
+    border-radius:30%;
+}
+
+p {
+}
+
+a {
+    color: var(--theme-color-accent2);
+}
+
+a:visited {
+    color: var(--theme-color-accent2);
+}
+
+hr {
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    color: var(--theme-color-accent2);
+}
+
+main,aside {
+    padding:2.5rem;
+    max-width:80rem;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-evenly;
+    padding:1rem;
+
+}
+.listing {
+    width: 100%;
+    margin: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.listing-preview {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
     justify-content: center;
 }
 
-main,aside{
-    border:1px solid white;
-    display:flex;
+
+img,
+video {
+    max-width: 95%;
+}
+
+audio {
+    width: 100%;
+}
+
+.metadata {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.metadata>div {
+    margin: 1rem;
+}
+
+.metadata p {
+    max-width: 20rem;
+}
+
+.metadata-author {
+    padding: 0.5rem;
+    display: flex;
     flex-direction: column;
-    margin:1.5rem;
-    padding:1rem;
+    align-items: center;
+    flex-wrap: nowrap;
 }
-main{
-    min-width: 40%;
-    max-width: 60rem;
+
+.metadata-author>img {
+    max-width: 5rem;
+    border-radius: 3rem;
 }
-aside{
-    min-width: 30rem;
-}
-header,footer{
-    width:100vw;
-    display:flex;
+
+
+header {
+    text-align: center;
+    background-color: transparent;
+    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
+    bottom: 0;
 }
-nav{
-    display:flex;
+
+nav {
+    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin-left:10%;
+    align-items: center;
+    justify-content: space-evenly;
 }
-nav>a{
+
+nav>* {
+    margin: 1rem;
+}
+
+section {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding: 1.25rem;
+    border-radius: 1rem;
+    min-width: 30vw;
+}
+
+article {
+    min-width: 30rem;
+    background-color: #000015b6;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 0.45rem var(--theme-color-accent);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding-left:10%;
+    padding-right:10%;
+}
+
+blockquote {
+    margin-left: 10%;
+    padding-left: 5%;
+    border-left: 0.5rem solid var(--theme-color-accent2);
+    font-style: italic;
+}
+
+section ul,
+section ol,
+article ol,
+article ul {
+    width: 90%;
+}
+
+article>a {
+    text-align: center;
+}
+
+article h3,
+section h3,
+article h4,
+section h4,
+article h5,
+article p {
+    width: 100%;
+}
+
+article h3 {
+    text-decoration: underline;
+}
+
+article img,
+article video,
+article iframe {
+    align-self: center;
+    max-width: 40rem;
+}
+
+section iframe,
+article iframe {
+    width: 80%;
+    height: 25rem;
+}
+
+table{
+    width:fit-content;
+}
+td,
+th {
+    margin: 0;
+    border: 1px solid var(--theme-color-accent2);
+    padding: 0.5rem;
+    text-align: left !important;
+}
+
+video{
+    background-color:black;
+}
+
+.link-preview{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding:1.5%;
+    justify-content: center;
+    text-decoration: none;
+    text-align: left;
+    max-width: 80%;
+}
+.link-preview>*{
+    margin:0.5rem;
+}
+.link-preview>img{
+    max-width: 20%;
+}
+.link-preview>div>p{
+    text-decoration: none !important;
+    color: var(--theme-color-secondary);
+}
+
+.listing img,
+.listing video {
+    max-width:25rem;
     margin:1rem;
 }
 
-a,
-hr{
-    color:var(--theme-accent-color);
+aside .listing img{
+    max-height: 15vh;
 }
-hr{
-    width:100%;
-    margin-top:1.5rem;
-    margin-bottom:1.5rem;
-}
\ No newline at end of file
+
+#sidebar {
+  padding:1rem;
+  padding-top:0;
+  margin:2rem;  
+  margin-top:3rem;
+}
+.recent,.featured{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+.recent *,
+.featured *{
+    margin:0;
+    padding:0;
+}
+.recent img,
+.featured img{
+    max-width:20rem;
+    max-height:10rem;
+    margin:1rem;
+}
+
+#social-links{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.social-link{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    margin:1rem;
+}
+
+.social-link img{
+    width:5rem;
+}
+
+
+
+
+
+@media print {
+    body{
+
+        background-color: white;
+    }
+    header,footer{
+        display:none;
+    }
+    body>img{
+        display:none;
+    }
+    img{
+        max-height: 60vh;
+    }
+    *,main,section{
+        color:black;
+        background-color: white;
+        border:none;
+        box-shadow: none;
+        padding:0;
+        max-width:100vw;
+    }
+    main{
+        max-width:100vw;
+
+    }
+
+}
+
+
+
+
+@media screen and (orientation:portrait){
+    main{
+        flex-direction: column;
+    }
+}
+
