Adding cityscape and junk

assets/sass/style.scss

@@ -1,3 +1,5 @@
+@import "mixins";
+
 @import "partials/global-styles";
 
 @import "partials/neon-sign";
@@ -8,6 +10,7 @@
 @import "partials/lavalamp";
 @import "partials/floppy";
 @import "partials/lcd-display";
+@import "partials/window";
 
 @import "partials/content-screens";
 
@@ -406,6 +409,26 @@ body {
       );
 }
 
+.window {
+  position: absolute;
+  top: 0;
+  left: 20%;
+  aspect-ratio: 16/9;
+  width: 350px;
+  border: 5px solid #c4b89a;
+  border-top: 0px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: -3%;
+    width: 106%;
+    height: 10px;
+    background-color: #c4b89a;
+  }
+}
+
 /* Post-it notes and papers on wall */
 .sticky-note {
   font-family: "Caveat", cursive;
@@ -435,7 +458,7 @@ body {
 }
 
 .note3 {
-  top: 12%;
+  top: 21%;
   left: 38%;
   transform: rotate(-3deg);
   background: #99ff99;
@@ -653,6 +676,13 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
+
+  @include media-down(lg) {
+    position: relative;
+    transform: none;
+    top: auto;
+    left: auto;
+  }
 }
 
 /* CRT Monitor bezel */
@@ -667,6 +697,12 @@ body {
     inset 0 2px 4px rgba(255, 255, 255, 0.3),
     inset 0 -2px 4px rgba(0, 0, 0, 0.3);
   position: relative;
+
+  @include media-down(lg) {
+    width: 100%;
+    padding: 0px 0px 45px 0px;
+    border-radius: 0px;
+  }
 }
 
 /* Brand logo on bezel */
@@ -680,6 +716,10 @@ body {
   font-size: 11px;
   font-weight: bold;
   letter-spacing: 2px;
+
+  @include media-down(lg) {
+    content: "RITUAL.SH";
+  }
 }
 
 /* Power indicator LED */
@@ -775,6 +815,10 @@ body {
     inset 0 0 40px rgba(0, 255, 100, 0.05),
     inset 3px 3px 8px rgba(255, 255, 255, 0.1),
     inset -3px -3px 8px rgba(0, 0, 0, 0.5);
+
+  @include media-down(lg) {
+    border-radius: 0px;
+  }
 }
 
 /* Screen curvature/glass emboss effect */
@@ -1541,8 +1585,7 @@ body {
 
 /* Coffee mug */
 .coffee-mug {
-  bottom: 12%;
-  left: 75%;
+  position: relative;
   width: 55px;
   height: 62px;
   background: linear-gradient(180deg, #4a2a1a 0%, #3a1a0a 100%);
@@ -1575,3 +1618,62 @@ body {
 
 /* Import a nice cursive font */
 @import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap");
+
+.navigation {
+  position: absolute;
+  bottom: 10%;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  @include media-down(lg) {
+    position: relative;
+  }
+
+  > .time-display {
+    width: 150px;
+    z-index: 30;
+    padding: 0.5em;
+    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
+    border: 1px solid #333;
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.5),
+      inset 0 1px 2px rgba(255, 255, 255, 0.1);
+    border-radius: 1em;
+    cursor: pointer;
+
+    &::after {
+      content: "Interests and Tools";
+      position: absolute;
+      width: 150px;
+      color: white;
+      font-size: 20px;
+      font-weight: bold;
+      z-index: 8000;
+      transform: rotate(-10deg);
+      border: 1px solid #0f0;
+      padding: 2px;
+      padding-left: 5px;
+      padding-right: 5px;
+      border-radius: 5px;
+      background-color: rgba(0, 0, 0, 0.7);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      text-align: center;
+
+      @include media-down(lg) {
+        opacity: 1;
+        transform: rotate(0deg);
+        bottom: 0;
+        font-size: 14px;
+      }
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+}