diff --git a/css/main.css b/css/main.css
index 6bbe79e..ea2369d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -14,7 +14,7 @@ body {
   color: #333;
   background-color: #222;
   position: relative;
-  background-image: url(/images/wood.png);
+  background-image: url(../images/wood.png);
 }
 
 h1, logo span {
@@ -47,7 +47,7 @@ article {
   border: 4px solid #285a71;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
   position: absolute;
   padding: 4px 0px;
   min-width: 500px;
@@ -85,20 +85,30 @@ article.expanded {
   width: calc(100% - 600px);
 }
 
+#article4 {
+  top: 243px;
+  right: auto;
+  left: 77px;
+  z-index: 27;
+  width: calc(100% - 600px);
+}
+
 logo {
-  width: 100%;
-  height: 100%;
+  width: 800px;
+  height: 600px;
+  max-width: calc(100% - 60px);
+  max-height: calc(100% - 60px);
+  top: 35px;
+  left: 140px;
   background-size: 680px 400px;
   z-index: 50;
   border: 4px solid #285a71;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
   border-color: #00AEC1;
   transition: all 0.3s ease-in-out;
   position: absolute;
-  left: 0;
-  top: 0;
   background-position: calc(50% - 30px) 50%;
   background-repeat: no-repeat;
   margin: 0;
diff --git a/images/lf-mini.gif b/images/lf-mini.gif
index 4d846a2..ad6dac2 100644
Binary files a/images/lf-mini.gif and b/images/lf-mini.gif differ
diff --git a/index.html b/index.html
index 1e28644..02d9d41 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
       role="img" aria-label="animated lastfuture logo"
       @click="if(sidebar) $dispatch('winchange'); sidebar = !sidebar; togglePhase();"
       @winchange.window="sidebar = true; togglePhase();"
-      :class="sidebar ? 'sidebar' : ''">
+      :class="{ 'sidebar': sidebar }">
       <span>lastfuture.gif</span>
     </logo>
     <article id="article1" @winchange.window="expanded = false; clicked = true" :class="{ 'ontop': !clicked, 'expanded': expanded }" x-data="article">
@@ -43,6 +43,14 @@
           <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
         </div>
       </article>
+      <article id="article4" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
+        <h1
+          @click="if(!expanded) $dispatch('winchange'); toggle()"
+        >videos/playlist.m3u</h1>
+        <div class="content" x-cloak x-show="expanded">
+          <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
+        </div>
+      </article>
     <script src="js/main.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
   </body>
diff --git a/sass/main.scss b/sass/main.scss
index 64a4508..cca29b6 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -9,7 +9,7 @@ $window-text: white;
   border: 4px solid $window-chrome;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
+  box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
 }
 
 [x-cloak] {
@@ -28,7 +28,7 @@ body {
   color: $primary-color;
   background-color: $background-color;
   position: relative;
-  background-image: url(/images/wood.png);
+  background-image: url(../images/wood.png);
 }
 
 h1, logo span {
@@ -101,11 +101,23 @@ article {
   width: calc( 100% - 600px );
 }
 
+#article4 {
+  top: 243px;
+  right: auto;
+  left: 77px;
+  z-index: 27;
+  width: calc( 100% - 600px );
+}
+
 logo {
   //width 680px 510px 425px 340px 289px
   //height 400px 300px 250px 200px 170px
-  width: 100%;
-  height: 100%;
+  width: 800px;
+  height: 600px;
+  max-width: calc( 100% - 60px );
+  max-height: calc( 100% - 60px );
+  top: 35px;
+  left: 140px;
   background-size: 680px 400px;
   &.sidebar {
     width: 300px;
@@ -122,8 +134,6 @@ logo {
   border-color: $window-chrome-active;
   transition: all 0.3s ease-in-out;
   position: absolute;
-  left: 0;
-  top: 0;
   background-position: calc( 50% - 30px ) 50%;
   background-repeat: no-repeat;
   margin: 0;